I've tried the following HTML code on several different Windows 7 computers with Internet Explorer 8, and everywhere this crashes Internet Explorer. I have not been able to reproduce this with IE7, or on Windows XP with IE8.
<!doctype html>
<head>
<title>Crashes IE8 on Win7</title>
<style>
article { display: block; }
</style>
<script>
document.createElement('article');
document.createElement('nav');
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<nav><ul><li>
<div id="map_canvas"></div>
<article>
</li></ul></nav>
</body>
The only real bug in the page, is the missing </article> tag. The rest is all required to make IE crash. I'm sure I could have narrowed it down further by disassembling the Google Maps API, but that went a bit too far for me.
Can anybody else reproduce this, or is their some weird configuration that only applies to all the machines I have tested this on?
EDIT: To be more clear, I am not looking for a fix to my code. (The fix would be: add missing </article> tag.) I am looking if this crashes IE8 on Win7 other people also, and maybe if I should report this somewhere, since I understand crashes can often be used to take control of a victims computer.
I can replicate your problem using IE8 on Windows 7. It could well be related to this post which suggests that the problem is caused by trying to modify an element before the page has finished loading. If this is the case you can fix the problem by using jQuery to call the loadScript method after the page has finished loading. E.g.
<script>
$().ready(function() {
loadScript();
});
</script>
Try moving the script down to the bottom of the page.
I'd also tidy up the following:
Remove the non-html code in the body
Add opening & closing html tag
This works for me:
<!doctype html>
<html>
<head>
<title>Crashes IE8 on Win7</title>
<style type="text/css">
article { display: block; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script type="text/javascript">
document.createElement('article');
document.createElement('nav');
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</body>
</html>
Related
I am completely new to javascript and would like to show and refresh RSS feed in a web page. I managed to show it in the page but I have problem refreshing the feed.
I tried the suggestions from this forum using setinterval and settimeout together with head.appendChild but did not work. They do not refresh the page.
I also tried "location.reload" function, which refreshes the page but shows blank page after the refresh. The same with metadata refresh in HTML.
I will be really grateful if someone can suggest a solution. My latest code is below which shows the feed in the page but does not refresh.
Edit: I may also need to add that the page I am showing the results are inside a PowerBI dasboard (web content tile). It is similar to w3schools trial windows. I could not refresh the results in any of them.
Thanks,
<!doctype html>
<html>
<head>
</head>
<body>
<script type = "text/JavaScript">
function load_js()
{
var versionUpdate = (new Date()).getTime();
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type = "text/javascript";
script.src= '//rss.bloople.net/?url=http%3A%2F%2Frss.cnn.com%2Frss%2Fcnn_latest.rss&detail=-1&limit=10&showtitle=false&type=js'+
versionUpdate;
head.appendChild(script);
script.remove;
}
load_js();
setInterval(function(){
load_js();
}, 3000);
</script>
</body>
</html>
Since you're creating the <script> tag on every iteration, you won't be able to update te source.
Consider remembering the <script> to update the src;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script type = "text/JavaScript">
this.tag = document.createElement('script');
function load_js() {
console.log('load_js()');
var versionUpdate = (new Date()).getTime();
var head= document.getElementsByTagName('head')[0];
this.tag.type = "text/javascript";
this.tag.src= '//rss.bloople.net/?url=http%3A%2F%2Frss.cnn.com%2Frss%2Fcnn_latest.rss&detail=-1&limit=10&showtitle=false&type=js'+ versionUpdate;
head.appendChild(this.tag);
this.tag.remove;
}
load_js();
setInterval(function(){
load_js();
}, 3000);
</script>
</body>
</html>
I've tested this in a w3schools trial windows and the versionUpdate is updated on each iteration.
JsBIN Demo
I wrote a JavaScript file which is only necessary for users with Firefox so I don't want other users to even load it.
<script src="js/myfile.js" type="text/javascript"></script>
Is it possible to modify this tag so it only works on Firefox?
In order to get the browser name, you can use:
navigator.userAgent.toLowerCase();
And for loading the another script, you can use the jquery way:
$.getScript("another_script.js");
Here a snippet with an example (tested with firefox and chrome).
another_script.js
$(function() {
alert("loaded");
});
main.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var bwsr = navigator.userAgent.toLowerCase();
console.log(bwsr);
$(function() {
if (bwsr.startsWith("mozilla")) {
console.log("firefox");
$.getScript("another_script.js");
} else {
console.log("not firefox, nothing will be done here");
}
});
/*
*/
</script>
</head>
<body>
</body>
</html>
I'm writing a small script that determines if the user is on IE8 or below. If they are, the script should completely empty the document (body and head) and stop any further script executing.
I've played around with document.write() but can only get this working with window.onload. But I want it to execute as soon as it knows the browser version (which is when the script executes).
Example page setup:
<html>
<header>
Some CSS
Some meta
...
</head>
<body>
Page content
<script>
if (IE < 8) { //in reality I have a function to determine this
document.write('You browser is outdate. Please upgrade to view this site.');
}
</script>
<script src="more-scripts"></script>
</body>
</html>
This doesn't work but if I wrap the script in a window.onload it does. But then the page flashes up before the code executes. How can I get this to work?
Rather than using document.write() to print a message, you can use the .innerHTML property of the document.body element to entirely replace the body of the page. For this technique, your browser-check script should go in the head section, not the body (this is usually where scripts like this would go anyway).
<html>
<header>
Some CSS
Some meta
...
<script>
if (IE < 8) { //in reality I have a function to determine this
document.body.innerHTML = "You browser is outdate. Please upgrade to view this site.";
}
</script>
</head>
<body>
Page content
<script src="more-scripts"></script>
</body>
</html>
you could use conditional comments for that:
<!--[if IE 8]>
<script>
document.body.innerHTML = '';
document.write('You browser is outdate. Please upgrade to view this site.');
</script>
<![endif]-->
I've built a webpage that is basically a main-page with a div that is filled with different pages by using AJAX. This basically works by loading pages into a div by using innerHTML. One problem I ran into was when a page with javascript is loaded into that div all of the other code runs fine; just the javascript doesnt work.
Main-page(index.php):
<html>
<head>
<script type="text/java">
////bunch of functions////
////Ends up that page_request on this instance is 'graph.php'////
document.getElementById('mydiv').innerHTML=page_request.responseText
</script>
</head>
<body>
<div id="mydiv"><div>
</body>
</html>
Child-page(loaded in div(graph.php)):
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" />
<script src="other_stuff.js"></script>
</head>
<body>
<script>
///bunch of script////
</script>
</body>
</html>
Now when loading the page itself (opening graph.php) I notice that everything works fine; it is just when I import graph.php to index.php through innerHTML into my div it does not work (no errors just nothing is shown). I have read through many other posts and guides and did not come up with any distictive solution; thinks I have seen were:
Put eval() around my code [I saw on a guide that this could lead
to malicious user attacks].
Create the scripts on the main page then just import the data using:
document.createElement() and .parentNode.insertBefore()
Create a listener and call the functions when I open graph.php
And this good example
Even though I am not 100% sure how this example could work because I have php populate information for the javascript to collect and then make my graph on graph.php; so if I put that function into index.php the php will already be loaded so I would have to refresh the page or call them to update information somehow. Just for some context I am ok at php but I am new and struggle with javascript so I do not know what solution would fit my situation or work the best. Any tips/examples would be greatly appreciated, thank you for your time.
From you code snippets it seems you're looking to embed complete pages within the main page. If that's the case, a more straightforward approach would be to use an iframe element instead.
For example:
...
<div id="main-page-container">
<iframe src="some-path/graph.php" scrolling="no" frameborder="no"></iframe>
</div>
...
See reference and usage example.
I would suggest using jQuery's .load() function for this.
Take a look here: jQuery API
Older browsers such as IE8 and below don't allow you insert a string that contains javascript and execute it, in any form.
Take for instance:
function addScriptText(js_code) {
var element = document.createElement("script");
element.innerHTML = js_code;
document.head.appendChild(element);
}
will not work in IE8 and below.
You must use eval to accomplish this:
function addScriptText(js_code) {
window.eval.call(window, js_code);
}
Otherwise you need to dynamically request an external js file such as:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "externalScript.js";
document.getElementsByTagName("head")[0].appendChild(script);
Note: The page you are loading (page2.html in this example) must be on the same domain as the page that is loading it (page1.html in this example)
Working solution with jQuery:
Page 1:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#page2").load("page2.html");
});
</script>
</head>
<body>
<h1>Page 1 Header</h1>
<div id="page2">
</div>
</body>
</html>
Page 2:
<h2>Page 2 Header</h2>
<script type="text/javascript">
alert("Page 2 loaded and javascript executed!");
</script>
I know I am probably doing this wrong because if trying this through try coffeescript feature it works but surprisingly it doesn't emit any result on my example:
<!--http://f.cl.ly/items/1u3Q3W101U2T18162v0V/test.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
</head>
<body>
<script type="text/coffeescript" >
document.write "<h2>TEST</h2>"
</script>
</body>
</html>
The document.write method doesn't seems to output anything to the body, in this case console.log works fine but not document.write
Even after trying to run the script with a onload handler like I use in javascript
var loaded = function(){
alert("hello");
}
document.addEventListener('DOMContentLoaded', loaded);
but then in coffeescript as
loaded = ->
alert "hello"
document.addEventListener "DOMContentLoaded", loaded
it seems neither the event method is being fired as opposed to javascript version
Anyone could help me find out what is happening?
Thanks
UPDATE
if running the console after the page is loaded I can get the following to work without problem:
CoffeeScript.eval('document.write "<h1>testing</h1>"')
but still wondering why the page itself is not showing automatically
Works on Firefox and Chrome but not in Safari
It seems the page is not showing if using Safari 5.0.3
I don't know anything about CoffeeScript, but don't use document.write. It is evil: http://javascript.crockford.com/script.html
Use createElement and appendChild/insertBefore instead:
var p = document.createElement("p");
p.innerHTML = "Lolz";
document.body.appendChild(p);
myDiv = document.getElementById("aDiv");
document.body.insertBefore(p, myDiv);
document.write has problems in Safari as well.
This is a humdinger, but after investigating, I've got your answer:
The way coffee-script.js works is that it looks for, and runs, scripts with type="text/coffeescript" after the document has loaded. In the case of Safari, that means that
<script type="text/coffeescript">
document.write "<h2>TEST</h2>"
</script>
is equivalent to
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
document.write("<h2>TEST</h2>");
}, false);
</script>
which silently fails. Note that making the insertion with the document.createElement method described by Erlend, or with a library like jQuery, will work fine.
Since this works in Chrome, I'd go ahead and call it a Safari bug. But the real moral of the story is: Don't use document.write.