两个javascript脚本的非独立性

Non-independence of two javascript scripts

本文关键字：独立性 脚本 javascript 两个      更新时间：2024-03-20

He Guys，

我有两个单独运行的脚本。一个是用于加载图像，一个是加载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>

您做出了一些无效的假设。

首先，所有脚本都占用相同的全局名称空间。因此，多个<script>...</script>标签不是独立的。

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

相当于：

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

其次，函数对window.onload的重复赋值不是累积的。window.onload = init后面跟着第二个window.onload = init，第二个赋值将覆盖第一个赋值。

现在您应该明白，您的第二个脚本会使第一个脚本无效。

要修复此问题，您可以为这两个函数指定唯一的名称，并从单个（匿名）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是完全可以的。

您会注意到，我为您重命名了变量，以避免"延迟"，这在JavaScript中有着非常特殊的含义。

相关文章：