Script to embed HTML content on page - javascript

The scenario: My company wants to have a "content builder" on our customer portal. Using this content builder, the user can check off their requested content (example: about the company, about our products, etc.)
Once the options are selected, I want to provide the user with a script they can place on their website. When run, the parameters in the script will reach out, call our CMS for the appropriate copy, and return the markup.. which should display within their browser.
My question is.. how do I go about doing this? I know how to get the HTML from the CMS, but how do I write the data back into the DOM? Should I just embed an IFRAME? Can I just write out div tags and such onto the host website? Any advice is appreciated, thanks in advance.

You can create markup to insert into the page.
You could add an id attribute to the script tag that gets embedded into the external site and have them place the script tag exactly where you want the content to appear.
<script id="myscripttag" src="..."></script>
then use some code like below to insert the markup before your script tag.
var insertMarkup = function(){
var scripttag = document.getElementById('myscripttag'),
YOURCONTENT = '<h1>hello</h1>',
//parentNode of script tag
p = scripttag.parentNode,
//new element to hold your content
n = document.createElement("div");
n.id = 'mynewdiv';
n.innerHTML = YOURCONTENT;
p.insertBefore(n,scripttag);
};

While a little bit more about the specific content would be helpful, the basic idea will be to use the innerhtml property of the DOM element into which you will be placing content. For example if you have a div with an id of "contentbox" you could write:
var x = htmlstringfromcms();
document.getElementById("contentbox").innerhtml=x;
if you want to append, rather than overwrite the content of the element try
var x = htmlstringformcms();
document.getElementById("contentbox").innerhtml+=x;

Related

Not getting tags html in page source

I have multilingual single page html application where I set html of tags by calling function on document.ready. However I am not getting html of any tag in page source when I view page on View Page Source. How can I get the tags in page source? document.ready is in the last script tag of the page.
$(document).ready(function() {
var lang = // get the language.
translateFunction(lang);
});
Below function is in js file. This file is added above the last script tag (i.e. document.ready script).
function translateFunction(lang) {
$("[tkey]").each(function (index)
{
var strTr = lang_resource[lang][$(this).attr('tkey')];
$(this).html(strTr);
});
}
<h1 tkey="firstH1"></h1>
Language wise data is in json format in the same js file with translate function.
When I view the page source, I see only
<h1 tkey="firstH1"></h1>
Where it needs to be like below,
<h1 tkey="firstH1">Anything from the translate function.</h1>
On the page, you can see the desired output, but in the page source, I am not getting html set. What I want to do is, I want set html of the tags in javascript on document.ready. How to do it?
EDIT
We want to add meta tags. And set keywords and description language wise. This is the main concern. The keywords and description are set in translate function. Will the crawler take the keywords and description?
We have two links language wise in site map. So when user select say french language, it will redirect to www.mysite.com?lang=fr and all the tags are set in french language. So the meta keywords and description.
Firstly if this is the exact code,
$(document).ready(function() {
var lang = // get the language.
translateFunction(lang);
});
there is error in itself...
there should be some value for var lang

Replacing contents of html page using another html page

I am trying to avoid header, sidebar info repeating of my html page template.
So, I was thinking to user innerHTML to replace the contents on the fly. However, I do not want to put entire target html on the same page under innerHTML as it will be nightmare to debug or maintain later.
So, is there a way to specify the another page link in the innerHtml and have contents separate?
just as an example
<script type="text/javascript">
function replacePage(page){
var ele = document.getElementById('page-wrapper'); ele.innerHTML = "<div>hey vik</div>";
}
</script>
I'm looking if i can specify the innerHTML value as some .html file name and move the <div>hey vik</div> there.
ok guys i finally used jquery to do this. What I did was instead of loaded content part, i actually moved the static part into a .html file and then loaded it via jquery as
$(function() {
$("#includedContent").load("navbar.html");
};
the place where i need to rander it i added as below
<div id="includedContent"></div>
You can use document.documentElement to select the root element of the document and the store it in a variable:
let content = document.documentElement;
And then use innerHTML to change the page content:
content.innerHTML = "<body><h1>text</h1><body>";

How to switch between original DOM and the DOM changed by a Content script?

I'm making a Chrome Extension that changes the DOM of a page. But I would like to give the user an option to switch between the page before the changes and the changed page.
It's a little bit like Google translate where you can change between the orginal language and the translated message.
I could not find anything in my own searches.
I know JavaScript but not JQuery yet.
Thanks for the help.
You could save the entire body in a variable, then start overwriting things. If you want to switch back load up the old body.
You could save all the original DOM content to a variable before running the content script. You can do this by using the following code at the top of your content script:
var originalDOM = document.getElementsByTagName("*");
This saves the entire DOM in an array called originalDOM. The * acts a universal tag, requesting every tag in the document. You can read more about the .getElementsByTagName() API here.
You could try:
var html = document.getElementsByTagName("html")[0];
var page = html.innerHTML;
This will give you everything between the <html> tags.
After the content script is injected, run:
var newPage = html.innerHTML;
Now, whenever you want to switch between the pages, simply run:
html.innerHTML = page; //or newPage
You can read more about the .getElementsByTagName() API here

document.write to display content on same page.

I have a doubt with javascript document.write method. Mostly when I use document.write() it shows me the content written with the method in a different page. For instance, if I write the command like this, document.write("Hello, My name is Sameeksha"); then the execution of this line takes me to a different document on the same page. I want to be able to append the message on the same page, with other elements of the page. For example, if I have text boxes and buttons on the page and I want the text with document.write to appear under all the content of the page or on a particular section of a page. Please suggest what can be done to get the output in this way? As, this way it will be really easy to create dynamic HTML content.
Thank you so much for your time.
Regards,
Sameeksha Kumari
document.write is basically never used in modern Javascript.
Whan you do instead is to create explicit DOM elements and append them to the document in the place you want. For example
var x = document.createElement("div"); // Creates a new <div> node
x.textContent = "Hello, world"; // Sets the text content
document.body.appendChild(x); // Adds to the document
Instead of appending to the end you can also add child nodes to any existing node. For example:
function addChatMessage(msg) {
var chat = document.getElementById("chat"); // finds the container
var x = document.createElement("div");
x.textContent = msg;
chat.appendChild(x);
}
I'd say 6502 posted the more correct way to do it, but I think someone should mention innerHTML as well. First, give some element in your HTML body an id so you can reference it:
<div id="outputDiv">I'm empty.</div>
Then, either at the bottom of your document (at the end of the <body> tag), or any other time after the page is loaded, you can update the contents with innerHTML:
document.getElementById("outputDiv").innerHTML = "<h1>Hello!!!</h1>";
Here's a jsfiddle demonstrating this. This isn't as clean/correct/elegant as using the more standard DOM methods, but it's well supported. Sometimes quick and dirty is what you need!

How can I append a new element in place in JavaScript?

I've created a JavaScript script that can be pasted on someone's page to create an iFrame. I would like for the person to be able to paste the script where they would like the iFrame to appear.
However, I can't figure out how to append the DOM created iFrame to the location where the script has been pasted. It always appends it to the very bottom of the body.
How do I append in place?
Mm. You could do:
document.write("<div id='iframecontainer'></div>");
document.getElementById('iframecontainer').innerHTML = '...';
But that feels ugly/wrong in a lot of different levels. I am not aware of any other alternatives, though.
EDIT: Actually, a quick google search revealed this artlcle which discusses why document.write is ugly and a nice alternative for the particular pickle you're in: Give your script tag an ID!
<script id="iframeinserter" src=".."></script>
And then you can get a reference to the script tag and insert the iframe before it:
var newcontent = document.createElement('iframe');
var scr = document.getElementById('iframeinserter');
scr.parentNode.insertBefore(newcontent, scr);
Paulo's answer can also be done without the ID, by simply looking for the last <script> element. This must be the script block we're in, because JavaScript guarantees all content past the closing tag of the current script block has not yet been parsed(*):
var scripts= document.getElementsByTagName('script');
var script= scripts[scripts.length-1];
script.parentNode.insertBefore(d, script);
This can be put in an onload/ready function if you like, but if so the ‘var script’ must be calculated at include-time and not in the ready function (when that executes, more <script>s will have been parsed).
(*: except in the case of <script defer>.)
If the user can give an id of an element that will be where the iframe should be, then it would be possible to just use css to move the iframe to where it should be on the page.

Categories