Question: What is the best practice to inject HTML, that contains javascript?
Script to load content in page:
elmnt = document.getElementById("contentcontainer");
elmnt.innerHTML = this.responseText;
Page:
Welcome to our restaurant!
<div id="contentcontainer"></div>
Responsetext:
<div>
The menu for today:
<script> Script to get API resonse menu(today); <script>
</div>
So I'm injecting HTML that contains a script. But the script is not executed. How should I change variable HTML inside an injection?
You could use "Template Strings" and inject your already processed HTML.
I dont understand what the problem is. InnerHtml should work perfectly, as long as the variable is global and also you get the desire content.
Here is an example of what i understod off what you want.
let str = '<p><script>var test="this is a test"</script></p>'
document.getElementsByTagName("BODY")[0].innerHTML =str;
console.log(test) // and here is the injected script variable result
To get the content of the site from the url you will have to use a library like jq getscript
Did i understand you correctly?
Related
I am trying to find a way (if possible) to use javascript to add some attributes to an element at render time and before the DOM is fully loaded. I know, that sounds counterproductive, but let me give you some background:
I'm working in an extremely limited templating platform that gives me access to some page variables, but they need some minor string manipulation. I can't leverage any of the ASP preprocessing so it has to happen on the client-side.
Specifically, I am trying to add Schema.org Microdata markup to an element before Googlebot scans through the document contents.
Essentially I need to modify an attribute value from $5.99 to 5.99.
Here's my most recent attempt, which makes the DOM modifications correctly, but not before Google's rich snippet validator processes the page:
<div class="pitinfo"><div class="padleft padright"><%Product.BasePrice%></div></div>
<!-- at page bottom -->
<script type="text/javascript">
(function() {
var pricesting = "<%Product.BasePrice%>";
var price = pricesting.slice(1);
$('.pitinfo').attr('itemprop', 'price');
$('.pitinfo').attr('content', price);
})();
</script>
After load I get this <div class="pitinfo" itemprop="price" content="9.99">$9.99</div>, however the Rich Snippet Testing tool tells me price is not set.
I have already tried using ASP in my template code but the hosting provider does not allow it.
Is it possible to make the DOM modifications sometime in the middle of the document rendering flow?
It is possible to insert a <script> tag inside of the <body>. JavaScript inside of the tag is loaded before the HTML after it, so you would be able to edit the element's value before the rest of the HTML/JS is loaded.
For example:
<div>
<div id="element" value="$5.99"></div>
<script>
var element = document.getElementById("element")
element.value = 5.99;
</script>
</div>
You can check it out here
I have multiple widgets like this
var c2409 = "<div class="products">PRODUCT1 PRODUCT2 PRODUCT4 ...</div>";
document.write(c2409)
And I call this
<script src="website/getjswidget.aspx?cid=xxxx-xxxx-xxx-xxxx"></script>
Now looks like sometime after I clear the cache, this replace everything in my html and I get a blank page only with this div from my widget.
Any other solutions to replace document.write?
This is by design.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
Source
If you want to append data to your webpage, use this:
document.body.innerHTML += 'your HTML code to add'
Edit: If you want to show this in a particular element, you can do something like this:
<!-- HTML element -->
<div id="myData"></div>
<!- Javascript code -->
document.getElementById('myData').innerHTML += 'your HTML'
Edit 2 (After some searching): You can get the current script element by using document.currentScript and then perhaps use Node.insertBefore to create a div right before that script tag, to put your data in.
Edit 3: Apparently document.currentScript doesn't work in IE. But this answer may help.
I have a javascript variable called locid that I am trying to use as part of a URL by setting the data-url of a div as follows:
data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?LocationID=locid&AsyncUpdateID=catalogue-view'>
I know I can't just throw the locid in that string as I have done in my sample code but I just put it there to illustrate where I need my javascript variable to be. How can I achieve this??
The problem here is #url.content needs to be run on server, where JavaScript variable is not visible. Write an independent AJAX call to fetch content and than set content in data-url
You cannot use the Javascript variable directly into attribute.
A workaround can be to reorder the parameters of your url and setting the JavaScript variable in script tag.
<button id="myButton" data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?AsyncUpdateID=catalogue-view'></button>
I have reordered the url parameters here. The location parameter will be set by following script. Place this script just after the button element.
<script>
var button = document.getElementById('myButton');
var url=button.getAttribute('data-url');
url+="&LocationID=" + locid;
button.setAttribute('data-url',url);
</script>
You can put the value in the page using document.write, but you can't write it out inside the tag, you have to write out the entire tag. Example:
<script>
document.write('<div data-url="#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?LocationID=' + locid + '&AsyncUpdateID=catalogue-view">');
</script>
I am in the process of making an addon for a software that basically allows you to have 'responsive' adverts, by checking the page size with javascript and then outputting the relevant ad code to the screen.
This works fine for text ad codes, however I've hit a snag when the ad code is javascript - I can't get the user-provided javascript to output to the page and be executed.
Is this possible at all?
Here is some example code:
<div id="admanagerresponsive">
<script type="text/javascript">
adUnit = document.getElementById("admanagerresponsive");
adWidth = adUnit.offsetWidth;
if (adWidth >= 728) {
<output ad code>
}
</script>
</div>
The code above will be directly in the page.
Is such a thing possible?
EDIT:
could be any advertiser's code, such as adsense. It'll be user provided, and will be standard html. However, it could contain tags, and these will need to be rendered and outputted correctly...
If you really need to inject add html code containing script tags and you are award of the security problems, i suggest to use a library like jQuery that takes care about the cross browser issues with executing <script> tags added later.
Additionally you need to take care about various pitfalls like:
Html paring is done before script parsing, so no matter where a </script> appears this will immediately end your script.
The examples are important for the situations where you have that code as inline script inside your html page.
Example 1:
<script>
adUnit = document.getElementById("admanagerresponsive");
adWidth = adUnit.offsetWidth;if (adWidth >= 728) {
// if you add </script> <b>this is visible as html</b> and everything below is not script anymore
}
</script>
Example 2:
<script>
adUnit = document.getElementById("admanagerresponsive");
adWidth = adUnit.offsetWidth;if (adWidth >= 728) {
var string = "<script> var test;</script>";//the same problem here everything behind the closing script tag is html and not script anymore
}
</script>
So if you need to have some script to inject there you need to make the </script> not to be detectable by the html parser:
<script>
adUnit = document.getElementById("admanagerresponsive");
adWidth = adUnit.offsetWidth;if (adWidth >= 728) {
var string = "<script> var test;</sc"+"ript>";//that way the html parser does not detect the closing script tag
}
</script>
A better solution is not to use inline script at all, not only for that reason, but because you should always keep css, js and html separated.
Break it into two ideas. From your HTML above, just call a js function you wrote somewhere else. Initially have that js function be an alert, to verify that works.
Once that works, you have the problem: how can I get custom js for a page? The answer to that is hopefully that you can create and load a (one-off, custom) js file the same way you create an html file. Or, libraries such as now.js could help. Or, there is a script portion of your html page that you understand how to assemble to include the js.
You could even preload all your size possibilities, then have the js routine from the first paragraph pick the right routine to call,
I'm using varnish+esi to return external json content from a RESTFul API.
This technique allows me to manage request and refresh data without using webserver resources for each request.
e.g:
<head>
....
<script>
var data = <esi:include src='apiurl/data'>;
</script>
...
After include the esi varnish will return:
var data = {attr:1, attr2:'martin'};
This works fine, but if the API returns an error, this technique will generate a parse error.
var data = <html><head><script>...api js here...</script></head><body><h1 ... api html ....
I solved this problem using a hidden div to parse and catch the error:
...
<b id=esi-data style=display:none;><esi:include src='apiurl/data'></b>
<script>
try{
var data = $.parseJSON($('#esi-data').html());
}catch{ alert('manage the error here');}
....
I've also tried using a script type text/esi, but the browser renders the html inside the script tag (wtf), e.g:
<script id=esi-data type='text/esi'><esi:include src='apiurl/data'></script>
Question:
Is there any why to wrap the tag and avoid the browser parse it ?
Let me expand upon the iframe suggestion I made in my comment—it's not quite what you think!
The approach is almost exactly the same as what you're doing already, but instead of using a normal HTML element like a div, you use an iframe.
<iframe id="esi-data" src="about:blank"><esi:include src="apiurl/data"></iframe>
var $iframe = $('#esi-data');
try {
var data = $.parseJSON($iframe.html());
} catch (e) { ... }
$iframe.remove();
#esi-data { display: none; }
How is this any different from your solution? Two ways:
The data/error page are truly hidden from your visitors. An iframe has an embedded content model, meaning that any content within the <iframe>…</iframe> tags gets completely replaced in the DOM—but you can still retrieve the original content using innerHTML.
It's valid HTML5… sort-of. In HTML5, markup inside iframe elements is treated as text. Sure, you're meant to be able to parse it as a fragment, and it's meant to contain only phrasing content (and no script elements!), but it's essentially just treated as text by the validator—and by browsers.
Scripts from the error page won't run. The content gets parsed as text and replaced in the DOM with another document—no chance for any script elements to be processed.
Take a look at it in action. If you comment out the line where I remove the iframe element and inspect the DOM, you can confirm that the HTML content is being replaced with an empty document. Also note that the embedded script tag never runs.
Important: this approach could still break if the third party added an iframe element into their error page for some reason. Unlikely as this may be, you can bulletproof the approach a little more by combining your technique with this one: surround the iframe with a hidden div that you remove when you're finished parsing.
Here I go with another attempt.
Although I believe you already have the possibly best solution for this, I could only imagine that you work around it with a fairly low-performance method of calling esi:insert in a separate HTML window, then retrieve the contents as if you were using AJAX on the server. Perhaps similar to this? Then check the contents you retrieved, maybe by using json_decode and on success generate an error JSON string.
The greatest downside I see to this is that I believe this would be very consuming and most likely even delays your requests as the separate page is called as if your server yourself was a client, parsed, then sent back.
I'd honestly stick to your current solution.
this is a rather tricky problem with no real elegant solution, if not with no solution at all
I asked you if it was an HTML(5) or XHTML(5) document, because in the later case a CDATA section can be used to wrap the content, changing slightly your solution to something like this :
...
<b id='esi-data' style='display:none;'>
<![CDATA[ <esi:include src='apiurl/data'> ]]>
</b>
<script>
try{
var data = $.parseJSON($('#esi-data').html());
}catch{ alert('manage the error here');}
....
Of crouse this solution works if :
you're using XHTML5 and
the error contains no CDATA section (because CDATA section nesting is impossible).
I don't know if switching from one serialization to the other is an option, but I wanted to clarify the intent of my question. It will hopefully help you out :).
Can't you simply change your API to return JSON { "error":"error_code_or_text" } on error? You can even do something meaningful in your interface to alert user about error if you do it that way.
<script>var data = 999;</script>
<script>
data = <esi:include src='apiurl/data'>;
</script>
<script>
if(data == 999) alert("there was an error");
</script>
If there is an error and "data" is not JSON, then a javascript error will be thrown. The next script block will pick that up.