Javascript working only in chrome but none other browser
Question
I am trying to populate the images in the background by javascript on page load. I tried with the following code snippet - I tried running it in Chrome locally as well as on localhost where it runs fine but in Firefox, Safari and all other browsers the images don't show up.
var body = document.body,
html = document.documentElement;
var height = Math.floor(Math.min(body.scrollHeight));
for(i=0; i<height; i++){
var images = [],
index = 0;
images[0] = "<img id='rel' src='http://ia.media-imdb.com/images/M/MV5BMTU4MDU3NDQ5Ml5BMl5BanBnXkFtZTgwOTU5MDUxNTE@._V1_SX300.jpg'>";
images[1] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw@@._V1_SX300.jpg'>";
images[2] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE@._V1_SX300.jpg'>";
images[3] = "<img id='rel' src='http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg'>";
images[4] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg'>";
images[5] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/MV5BMTk4ODQzNDY3Ml5BMl5BanBnXkFtZTcwODA0NTM4Nw@@._V1_SX300.jpg'>";
images[6] = "<img id='rel' src='http://ia.media-imdb.com/images/M/MV5BMjU4NDExNDM1NF5BMl5BanBnXkFtZTgwMDIyMTgxNzE@._V1_SX300.jpg'>";
images[7] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/MV5BOTAzODEzNDAzMl5BMl5BanBnXkFtZTgwMDU1MTgzNzE@._V1_SX300.jpg'>";
images[8] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/MV5BMTc2MTQ3MDA1Nl5BMl5BanBnXkFtZTgwODA3OTI4NjE@._V1_SX300.jpg'>";
images[9] = "<img id='rel' src='http://ia.media-imdb.com/images/M/MV5BMTAzZmJiOGQtOWM3NS00MDEwLWJiNGEtN2QzMDM3NDJjMWQwXkEyXkFqcGdeQXVyNDUzOTQ5MjY@._V1_SX300.jpg'>";
images[10] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/MV5BMTUyMTE0ODcxNF5BMl5BanBnXkFtZTgwODE4NDQzNTE@._V1_SX300.jpg'>";
images[11] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/MV5BMjM2Nzg4MzkwOF5BMl5BanBnXkFtZTgwNzA0OTE3NjE@._V1_SX300.jpg'>";
images[12] = "<img id='rel' src='http://ia.media-imdb.com/images/M/MV5BMjEyMjcyNDI4MF5BMl5BanBnXkFtZTcwMDA5Mzg3OA@@._V1_SX300.jpg'>";
images[13] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg'>";
images[14] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/MV5BMjIxMjgxNTk0MF5BMl5BanBnXkFtZTgwNjIyOTg2MDE@._V1_SX300.jpg'>";
index = Math.round(Math.random() * images.length);
document.write(images[index]);
}
and the HTML:
<body>
<div id="continer">
<script type="text/javascript" src="images.js"></script>
</div>
2 answers
solution1
0 ACCPTED 2016-11-06 20:56:05
In Firefox and some other browsers, the scrollbar isn't attached to the body, but the documentElement ie the <html> tag.
You have to check which one actually has the scrollHeight
var body = document.body,
html = document.documentElement;
var bodyHeight = Math.floor(Math.min(body.scrollHeight));
var htmlHeight = Math.floor(Math.min(html.scrollHeight));
var height = Math.max(bodyHeight, htmlHeight);
for(i=0; i<height; i++){ ...
solution2
0 2016-11-06 21:05:53
Because your code is referring to the body and visual elements of the page, you need to execute your script after the page is loaded. I modified your code as blow and it now works in Chrome, IE, and FF.
The most critical change was to run the script from the onLoad() event.
<body onload="showImages();">
Note I cut out a lot of the image array inserts here for brevity.
<html>
<head>
</head>
<script>
function showImages() {
var body = document.body,
html = document.documentElement;
var height = Math.floor(Math.min(body.scrollHeight));
for(i=0; i<height; i++){
var images = [],
index = 0;
images[0] = "<img id='rel' src='http://ia.media-imdb.com/images/M/MV5BMTU4MDU3NDQ5Ml5BMl5BanBnXkFtZTgwOTU5MDUxNTE@._V1_SX300.jpg'>";
images[1] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw@@._V1_SX300.jpg'>";
// ...
index = Math.round(Math.random() * images.length);
document.write(images[index]);
}
}
</script>
<body onload="showImages();">
<div id="continer">``
</div>
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.