Dynamically added javascript not executed in Safari & IE
Question
i'm having trouble executed a block of javascript that is dynamically loaded and insert into the page. This is the code that is loaded (simplified):
<p>i am html-code</p>
<script type="text/javascript">
alert("i'm here");
</script>
This piece of code is injected with this Mootools command:
new Element('div', {
'class': 'foo'+item_data[id].contenttype,
'id': '123',
'html': code
}).inject($('presentation'));
(The variable code contains the first code snippet.)
In Firefox, this works. When the inject command is called, the paragraph is displayed and the javascript is executed. In IE and Safari, only the paragraph is displayed.
Any hints how I can cope with this problem without 'eval'? Thx in advance.
2 answers
solution1
1 ACCPTED 2011-01-15 19:18:08
Here's a good short article on one way to handle it.
The underlying problem is that IE & Safari don't evaluate the <SCRIPT> DOM node after loading it by default; this is arguably a security feature.
The basic trick to fix it is that you have to write it as a function, and set that function to be evaluated on an onload event; that guarantees that the code gets evaluated.
Stealing following the article's example, the code would look something like
var script = document.createElement('script');
script.setAttribute('src','myjavascriptfile.js');
script.setAttribute('type','text/javascript');
var loaded = false;
var loadFunction = function()
{
if (loaded) return;
loaded=true;
// your code goes here
alert("I'm here!");
};
script.onload = loadFunction;
script.onreadystatechange = loadFunction;
Update :
It sounds like you've got a couple of variables going on here. Try simplifying a little bit -- instead of depending on MooTools, make a simple basic HTML page and just put your code into that.
Here's an example:
<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<title>Trial</title>
<meta name='generator' content='BBEdit 9.6' />
<script type="text/javascript">
//<![CDATA[
var script = document.createElement('script');
script.setAttribute('src','myjavascriptfile.js');
script.setAttribute('type','text/javascript');
var loaded = false;
var loadFunction = function(){
if (loaded) return;
loaded=true;
// your code goes here
alert("I'm here!");
};
script.onload = loadFunction;
script.onreadystatechange = loadFunction;
//]]>
</script>
</head>
<body>
</body>
</html>
That's clean Tidy-ed code that should work on the most neurotic of acceptable browsers, and IE as well. Assuming you have a javascript source file to be loaded as myjavascriptfile.js , it should work.
Then I'd suggest using this as myjavascriptfile.js to start with:
// myjavascriptfile.jx
alert("My java script has loaded YAY!!");
solution2
0 2015-05-01 14:02:16
I realise this is 4 years later, but I had the same issue recently.
Going back a couple Mootools versions (3.x, 4.x and 5.x), the addEvent worked for me using:
new Element('script', {
src: 'myscript.js',
async: true
}).addEvent('load', myFunc).inject(document.getElement('body'), 'top');
One thing I did find was a delay between the script loading and its contents executing.
You can add a delay in the onLoad method, or fire an even in the loaded JS and listen for that instead:
window.addEvent('myscripEvent', myFunc);
new Element('script', {
src: 'myscript.js',
async: true
}).inject(document.getElement('body'), 'top');
Then in myscript.js:
/* my code here */
window.fireEvent('myscripEvent');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.