Javascriptはクロムのみで動作しますが他のブラウザはありません

ページの読み込み時にjavascriptでバックグラウンドで画像を取り込もうとしています。私は次のコードスニペットを試してみました - 私はChromeでローカルで実行してみましたが、ローカルホスト上では正常に動作しますが、Firefox、Safari、その他のブラウザでは画像が表示されません。Javascriptはクロムのみで動作しますが他のブラウザはありません

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/[email protected]_V1_SX300.jpg'>"; 

    images[1] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg'>"; 

    images[2] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/[email protected]_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/[email protected]@._V1_SX300.jpg'>"; 

    images[5] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg'>"; 

    images[6] = "<img id='rel' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[7] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[8] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[9] = "<img id='rel' src='http://ia.media-imdb.com/images/M/MV5BMTAzZmJiOGQt[email protected]._V1_SX300.jpg'>"; 

    images[10] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[11] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[12] = "<img id='rel' src='http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg'>"; 

    images[13] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[14] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    index = Math.round(Math.random() * images.length); 

    document.write(images[index]); 
}

とHTML：Firefoxといくつかの他のブラウザで

<body> 
    <div id="continer"> 
    <script type="text/javascript" src="images.js"></script> 
    </div>

出典

2016-11-06 Anudeep Gupta

コンソールにエラーがありますか？ – vlaz

@adeneo ...どうやら、私はそれがそこにあるのを見ない。たとえそれをコピーして貼り付けるとしても...それはまだ間違っていますが、最大インデックスよりも大きいインデックスを返すことができます。 – vlaz

@vlaz - はい、正しい方法は確かに 'Math.floor'となるでしょう – adeneo

、スクロールバーを本体に装着されていませんが、documentElementすなわち<html>タグ。

あなたはあなたのコードは、本体とページの視覚的要素に言及されているので、実際に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++){ ...

出典

2016-11-06 20:56:05 adeneo

を持つ1チェックする必要があり、ページがロードされた後、あなたのスクリプトを実行する必要があります。私はあなたのコードを吹き飛ばすように修正しました。これは現在、Chrome、IE、およびFFで動作します。

最も重要な変更は、onLoad（）イベントからスクリプトを実行することでした。

<body onload="showImages();">

注意ここでは、簡潔にするために、ここでは多くの画像配列の挿入を省略しています。

<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/[email protected]_V1_SX300.jpg'>"; 

images[1] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg'>"; 

// ... 

index = Math.round(Math.random() * images.length); 

document.write(images[index]); 

} 
} 
</script> 
<body onload="showImages();"> 
<div id="continer">`` 

</div>

出典

2016-11-06 21:05:53

Javascriptはクロムのみで動作しますが他のブラウザはありません

答えて

関連する問題