2つのjavascriptスクリプトの非依存

Question

He Guys、

2つのスクリプトが別々に正常に動作します。 1つは画像を読み込むためのもので、もう1つはYoutube iframe埋め込みを読み込むためのものです。

しかし、彼らは一緒に働くようには思われません。お手伝いできますか？

<iframe width="560" height="315" frameborder="0" data-src="https://www.youtube.com/embed/fKnbOJ4NAvS" src=""></iframe> 
 

 
<a rel="nofollow" target="_blank" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.domain.com"><img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="googleplus.png"></a> 
 

 
<script> 
 
function init() { 
 
var imgDefer = document.getElementsByTagName('img'); 
 
for (var i=0; i<imgDefer.length; i++) { 
 
if(imgDefer[i].getAttribute('data-src')) { 
 
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src')); 
 
} } } 
 
window.onload = init; 
 
</script> 
 

 
<script> 
 
function init() { 
 
var vidDefer = document.getElementsByTagName('iframe'); 
 
for (var i=0; i<vidDefer.length; i++) { 
 
if(vidDefer[i].getAttribute('data-src')) { 
 
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src')); 
 
} } } 
 
window.onload = init; 
 
</script>

Answer 1

無効な仮定のカップルを作りました。

まず、すべてのスクリプトが同じグローバル名前空間を占有します。複数<script>...</script>タグは独立していません、したがって。

<script> 
//script 1 
</script> 
<script> 
//script 2 
</script> 

と等価である：第二に、window.onloadの機能の繰り返し割り当ては累積ない

<script> 
//script 1 
//script 2 
</script> 

。 window.onload = initに続いて第2のwindow.onload = initがあると、2番目の割り当てが最初の割り当てを上書きします。

ここで、2番目のスクリプトが最初のスクリプトを無効にすることを理解する必要があります。修正するには

、次の2つの機能に一意の名前を与えると、単一の（匿名）window.onloadハンドラからそれらを呼び出すことができます。

<script> 
function init_1() { 
    var imgElements = document.getElementsByTagName('img'); 
    for (var i=0; i<imgElements.length; i++) { 
     if(imgElements[i].getAttribute('data-src')) { 
      imgElements[i].setAttribute('src', imgElements[i].getAttribute('data-src')); 
     } 
    } 
} 
function init_2() { 
    var vidElements = document.getElementsByTagName('iframe'); 
    for (var i=0; i<vidElements.length; i++) { 
     if(vidElements[i].getAttribute('data-src')) { 
      vidElements[i].setAttribute('src', vidElements[i].getAttribute('data-src')); 
     } 
    } 
} 
window.onload = function() { 
    init_1(); 
    init_2(); 
}; 
</script> 

あなたが交互にinit_1()とinit_2()を省略して、匿名の内部で直接使うすべてのものを書くことができますwindow.onloadハンドラ：

<script> 
window.onload = function() { 
    var imgElements = document.getElementsByTagName('img'); 
    var vidElements = document.getElementsByTagName('iframe'); 
    var i; 

    for (i=0; i<imgElements.length; i++) { 
     if(imgElements[i].getAttribute('data-src')) { 
      imgElements[i].setAttribute('src', imgElements[i].getAttribute('data-src')); 
     } 
    } 

    for (i=0; i<vidElements.length; i++) { 
     if(vidElements[i].getAttribute('data-src')) { 
      vidElements[i].setAttribute('src', vidElements[i].getAttribute('data-src')); 
     } 
    } 
}; 
</script> 

このように変数iを再利用することは完全にOKです。

"Defer"を避けるために、変数名を変更したことに気づくでしょう。これはJavaScriptで非常に特殊な意味を持ちます。