within a website I'm writing the content of a dynamically added iframe with JavaScript. After adding the content to the iframe the JavaScript in the iframe will be executed. Unfortunately there are differences in IE. IE (8-11) will execute inline JavaScript first, before executing external scripts even if they are before the internal scripts. This is very strange since the normal process is, that JavaScript will be loaded synchronously step by step.
Example:
My webpage:
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta charset="UTF-8">
<title>
TEST
</title>
</head>
<body>
<iframe name="testFrame" frameborder="0"></iframe>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $iframe = $("iframe");
// Data
var data = "<!doctype html><html><head>";
data += '<scrip'+'t type="text/javascript" src="test1.js"><'+'/script>';
data += '<scrip'+'t type="text/javascript">console.log("Inline");<'+'/script>';
data += "</head><body>TEST</body></html>";
// Write in frame
var dstFrame = $iframe[0];
var dstDoc = dstFrame.contentDocument || dstFrame.contentWindow.document;
dstDoc.write(data);
dstDoc.close();
});
</script>
</body>
</html>
test1.js will just log a example status to see what kind of log will be executed firstly:
console.log("EXTERNAL");
In Firefox the console will be:
"EXTERNAL" test1.js:1
"Inline" test.html:1
"EXTERNAL" test1.js:1
"Inline" test.html:1
In IE the console will be:
EXTERNAL
Inline
Inline
EXTERNAL
As you can see the inline content will be executed before the external even if the external was added to the iframe before!
Can somebody tell me why and how to avoid it?
Notice: You can ignore the first two console logs since the parser will log the JavaScript even if it is inside a string (in my example it is inside the string).
Related
i have linked my script.js file to my index.html file and both files are in same directory. i have linked that script.js file in section but that is not working when i open-up the console it is shwoing
script.js:2 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
but whenever i link that file in the last part of the section perfectly, even putting that file in the first section of also not working.
inde.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<p id="name">
<span>john</span>
</p>
</body>
</html>
script.js:
var result = document.getElementById("name");
var final = result.getElementsByTagName("span");
console.log(final);
Scripts can go in the head so long as the logic that tries to find elements in the DOM, happens after the DOM is loaded.
As covered by the duplicate, the usage of a document ready or a load event handler on the window allows any logic to be put in the head, without having to worry about the DOM being loaded yet, as they delay the execution of the logic until the DOM is loaded.
Thank You #taplar
This might be a dumb question but I have actually never done this and what I am trying is not working.
I have 2 files
test.html
test.js
I am linking the js as an external in test.html
<!doctype html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
In my js file I have something like this
document.appendChild('<div>testing</div>')
I also tried
document.getElementsByTagName('body').appendChild('<div>testing</div>')
What I am doing wrong? I just want to learn how to generate html from an external js file for a future project I am working on.
You should generally try to run scripts that depend on the page after the document has been parsed, not before - if you put the script in <head> and run it immediately, the <body> has not been created yet. Give your script tag the defer attribute so that it only runs after the document is fully parsed:
<script defer type="text/javascript" src="test.js"></script>
appendChild accepts an element as a parameter, not a string
You need to append to the body, not the document itself (Only one element on document allowed.)
If you want to append an HTML string, assign/concatenate to the .innerHTML property
Assigning to .innerHTML will corrupt existing references to elements inside, including listeners. In order to keep listeners active, use insertAdjacentHTML instead:
document.body.appendChild(document.createElement('div'))
.textContent = 'testing1';
// Another method:
document.body.innerHTML += '<div>testing2</div>';
// Another method:
document.body.insertAdjacentHTML('beforeend', '<div>testing3</div>');
I've been struggling for... hours on a simple problem even though it seems to have been described here :How to access SVG elements with Javascript
I can't access elements of an external svg file loaded in a embed tag, even if I wait for the div or the whole window to load (I've tried several "load listeners")
I've simplified my html file into those fewlines to show you the issue :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desperate demo</title>
</head>
<body>
<div id="content">
<embed class="emb" id="maptest" type="image/svg+xml" src="star.svg">
</div>
<script type='text/javascript'>
window.onload = initAll;
function initAll(){
var mySVG = document.getElementById("maptest");
var svgDoc = mySVG.contentDocument;
console.log(svgDoc);
}
</script>
</body>
</html>
Basically, the log returns "null" or "undefined" on contentDocument property call, as if there was no svg at all loaded in the DOM.
Can you see what did I miss ? It doesn't work either if I write the whole svg tag in my html instead of calling an extern file...
Try getSVGDocument() and see if it helps you:
window.onload = initAll;
function initAll(){
var mySVG = document.getElementById("maptest");
console.log(mySVG);
var svgDoc = mySVG.getSVGDocument();
console.log(svgDoc);
}
I have the following code which works properly in chome
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
//<![CDATA[
!function (){
window.stop();
var html = '<!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n</head>\n<body>\n \<script>console.log("loaded");<\/script>\ntext\n</body>\n</html>';
document.documentElement.innerHTML = html;
}();
//]]>
</script>
</body>
</html>
It prints "loaded" in the console. The same code does not work by firefox, it does not run the script, just prints the text.
(If you are curious why I need this, you can find it here: https://stackoverflow.com/a/30933972/607033 )
I tried possible solutions like this: https://stackoverflow.com/a/20584396/607033 but they did not work. Any idea how to work this around?
Note: there are many scripts in the HTML, e.g. bootstrap, jquery, facebook, google, etc..., not just a single inline script.
I think there is no way in firefox to replace the complete HTML document with javascript without leaving the actual page. A workaround to reuse the original document and replace only the head and body tags:
$('html').html(html);
does this automatically: it strips out the HTML tags, injects the head and the body and loads the scripts.
ref: https://stackoverflow.com/a/1236372/607033
I have a simple javascript file like so:
$(document).ready(function () {
alert("my controller");
});
I have an HTML file like so:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="/js/generateLineupController.js"></script>
</body>
</html>
for the love of all things holy why in the world would the alert not show? I get a 200 on GET for the javascript file, so it's loading.
Several problems here.
You're trying to load the script twice for some reason. Don't do that. Load it in <head>, or at the end of <body>, but not both.
You're trying to use jQuery syntax ($(...)), but you haven't loaded the jQuery library. You'll need that.
The $(document).ready(...) indicates that you are trying to use jQuery, but you aren't loading jQuery in your page. Check your console log; you will see the errors there.
Also, there's no need to load the script twice with two <script> tags; just load it once.