JS Asynchron script faild to execute - javascript

I want to include an adserver js script with javascript and load it async. But every try ends with an warning and the script isn't executed.
I get the following error message:
"Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
I have tried to following variants:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://example.com/test.js";
document.body.appendChild(script);
Or I used the HTML Script attribute async
<script src="http://example.com/test.js" async></script>
But nothing worked, since the external script uses document.write. Is there another way to include such scripts?
How to "explicitly open" a page ("unless it is explicitly opened" - see warning)?


One way would be to overwrite document.write temporarily until the script is executed, afterwards replace original functionality.
var tempDocWrite = document.write;
document.write = function(el){
var div = document.createElement('div');
div.innerHTML = el;
document.body.appendChild(div)
}
var script = document.createElement('script');
script.onload = function(){
document.write = tempDocWrite
}
script.type = 'text/javascript';
script.src = "http://example.com/test.js";
document.body.appendChild(script);
note: have not tested the above code

Related

Failed to execute 'write' on 'Document' when created synchronous dynamic script tag

I wanted to include below script tag inside div dynamically.
<script type="text/javascript" src="http://ads.appnexus.com/ttj?id=12345678&cb=${CACHEBUSTER}"></script>
So I am able to do it by this way
document.write('\x3Cscript type="text/javascript" src="http://ads.appnexus.com/ttj?id=12345678&cb=${CACHEBUSTER}">\x3C/script>')
But I am not able to include it when I create it like
window.onload = function() {
var sNew = document.createElement("script");
sNew.type = 'text/javascript';
sNew.async = false;
sNew.src = "http://ads.appnexus.com/ttj?id=12345678&cb=${CACHEBUSTER}";
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);
};
On Crome console it showing warning as
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
So what is wrong I done on above code. I wanted to include script Synchronously using document.createElement("script")

Javascript to dynamically insert plugins and code

I'm trying to provide my users with a single <script> tag that will add some plugins to the page and execute some javascript code. I'm providing my users with a code snippet like this, and asking them to add it anywhere within the body of their website:
<script type="text/javascript" src="//my-domain/code?s=1a2b3c4d&t=faq&cb=1408412749" async></script>
In the response, I have the following Javascript code:
//add jquery to page
var script = document.createElement('script');
script.src = 'http://my-domain/assets/js/jquery.min.js';
document.body.appendChild(script);
//move jquery to our own namespace
var script = document.createElement('script');
script.innerText = "var SB = {};SB.$ = jQuery.noConflict(true);";
document.body.appendChild(script);
As you can see, I'm trying to add Jquery to the page, and then namespace it in case Jquery already exists. The problem is that when the code executes, I'm receiving this error:
Uncaught ReferenceError: jQuery is not defined
So, clearly jQuery is not loaded yet when the namespacing code executes, but I don't understand why. Shouldn't jQuery be defined at this point?

The script.onload function seems to have solved the problem:
//add jquery to page
var script = document.createElement('script');
script.src = 'http://my-domain/assets/js/jquery.min.js';
script.onload = function(){
//move jquery to our own namespace
var script = document.createElement('script');
script.innerText = "var SB = {};SB.$ = jQuery.noConflict(true);";
document.body.appendChild(script);
}
document.body.appendChild(script);

Executing script inserted with innerhtml

I'm using the following code to attempt to execute one of adNetworks banners after an innerhtml has been called
// container is where you want the ad to be inserted
var container = document.getElementById('sponsor_container2');
var w = document.write;
document.write = function (content) {
container.innerHTML = content;
document.write = w;
};
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'http://go.adversal.com/ttj?id=2609728&size=728x90&promo_sizes=468x60,320x50,300x50,216x36';
document.body.appendChild(script);
However for whatever reason I reason the following message
Resource interpreted as Script but transferred with MIME type text/html: "http://ib.adnxs.com/ttj?id=2609728&size=728x90&promo_sizes=468x60,320x50,300x50,216x36".
And nothing happens, the above code has worked in the past for previous adNetworks so this is why I'm so dumb founded
This is the script my ad page provided me
<script src="http://go.adversal.com/ttj?id=2609728&size=728x90&promo_sizes=468x60,320x50,300x50,216x36" type="text/javascript"></script>

I think your problem is the fact that you have re-defined a function that is already in the Javascript document notation: document.write() is a function that is used to write to the document, and as you may know, you cannot re-define defined functions in Javascript.
You probably just want document.write(w) or something like that.
Hope I could help.

Include jQuery from another JavaScript file

I am trying to include jQuery from a javascript file. I have tried the following, although it doesn't work.
var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>';
document.getElementsByTagName('head')[0].appendChild(script);

</script> closes the opening <script> block, even if it's in a string. I would do it this way:
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = document.location.protocol + '//code.jquery.com/jquery-1.9.1.min.js';
document.getElementsByTagName('head')[0].appendChild(script)
})();

You can't have </script> anywhere inside a script block, not even inside a string, because it will end the script block there.
Break up the ending tag in the string:
var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></scr'+'ipt>';

Just use the jQuery getScript() method to load jQuery: http://api.jquery.com/jQuery.getScript/
...Just kidding.
Try this code:
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
head.appendChild(script);
From: http://unixpapa.com/js/dyna.html
Also, if using on an https page, you will need to load the script from an https compatible CDN, like the Google Hosted Libraries (src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js")

(function() {
var script = document.createElement('script');
script.type = "text/javascript"; // keeping older browsers happy.
script.src = window.location.protocol + '//code.jquery.com/jquery-1.9.1.min.js';
// browsers prevent cross-protocol downloading.
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);// In Opera a site can get by without a <head>
})();

var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
document.getElementsByTagName('head')[0].appendChild(script);

using a tiny re-usable script adder:
function fetch(url){
var d=document, s='script';
d.getElementsByTagName(s)[0].parentNode.appendChild(d.createElement(s)).src=url;
}
fetch('//code.jquery.com/jquery-1.9.1.min.js');
not all pages have HEADs in all browsers, but if a script is running, so can a sibling script tag...

First of all, the variable script contains the sequence </script> which you can not make it appears as it is in your code, because browser will assume(and it must) that it is <script> tag close.
for example if your script code contains syntax error, which is a string variable that has no close " it will looks like
<script>var bad = "abcd ;</script>
to solve this you can break the </script> string like "</scr" + "ipt>" or you could escape it: "<\/script>"
so:
var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"><\/script>';
document.getElementsByTagName('head')[0].appendChild(script);
Second thing is that appendChild() function accept a Node element and not a string
so:
var script = document.createElement("script");
script.src = "http://code.jquery.com/jquery-1.9.1.min.js";
document.getElementsByTagName("head")[0].appendChild(script);
Anyway, I prefer to use a module and JavaScript loader like RequireJS.

Appending JavaScript file reference after the last hard coded JavaScript file reference in the HEAD

Apologies if the following sounds a little strange. Am working in a legacy framework that allows no access to core templates so cannot alter the loading order of files.
What i am trying to do is load a JS file in the HEAD of the document after the final SCRIPt in said document HEAD.
I currently am using the following with no success:
var head = document.getElementsByTagName("head")[0];
var headScripts = head.getElementsByTagName("script");
var headScriptsLength = headScripts.length - 1;
var headScripts = headScripts[headScriptsLength];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/Global/ICIS/Scripts/global.js';
headScripts.appendChild(newScript);
It adds the reference to global.js directly after the block that creates it.

You better off appending your script simply to the head, and so it will become your last script.
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/Global/ICIS/Scripts/global.js';
head.appendChild(script);

Categories

Resources