跨多个页面的多个iframe不同?

时间:2019-11-01 17:29:06

标签: javascript iframe

我的代码在id“ greMapTempe”之后停止正确运行;我认为这是因为它无法在插入的许多页面中找到该ID。我要加载的iframe在每个页面上都不同,因此我需要我的脚本跳过无法找到的ID,然后继续查找下一个ID。我可以对打击代码做什么以确保所有ID都被检查,即使它们不在页面中也是如此?

function loadDeferredIframe() {
	var iframe = document.getElementById("greYoutube");
	iframe.src = "https://www.youtube.com/embed/h7_w43jJ0Ts"

	var iframe = document.getElementById("greMapTempe");
	iframe.src = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3330.0372197439724!2d-111.96932568528953!3d33.422273980782116!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzPCsDI1JzIwLjIiTiAxMTHCsDU4JzAxLjciVw!5e0!3m2!1sen!2sus!4v1486774192595"

	var iframe = document.getElementById("greMapCincinnati");
	iframe.src = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3086.8059851441258!2d-84.4652936843564!3d39.31532112980541!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88404fb4ec94a687%3A0x915a9a0db6e53917!2sGreat+Room+Escape+Cincinnati!5e0!3m2!1sen!2sus!4v1541446663243"

	var iframe = document.getElementById("greMapCleveland");
	iframe.src = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2992.564362618732!2d-81.627932484311!3d41.405266202849035!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8830e442a6185089%3A0x90787a2298a6c3c2!2sGreat+Room+Escape+Cleveland!5e0!3m2!1sen!2sus!4v1541446505618"

	var iframe = document.getElementById("greMapColumbus");
	iframe.src = "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12214.714268930691!2d-82.9792519!3d40.0602736!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd1a0ee0aa5fb171a!2sGreat+Room+Escape+Columbus!5e0!3m2!1sen!2sus!4v1541446346773"

	var iframe = document.getElementById("greMapAustin");
	iframe.src = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3443.8281848309443!2d-97.71271668471364!3d30.32740461210432!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644ca3ced1c17f7%3A0x7bd80180add156d1!2sMind+Spark!5e0!3m2!1sen!2sus!4v1472767173729"

	var iframe = document.getElementById("greMapDallas");
	iframe.src = "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13390.834398025358!2d-96.7070997!3d32.9587021!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x897c1a032f856003!2sGreat+Room+Escape+Dallas!5e0!3m2!1sen!2sus!4v1541446025561"

	var iframe = document.getElementById("greSanAntonio");
	iframe.src = "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13900.967422077894!2d-98.4774668!3d29.4217269!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xfee289ea3851e800!2sGreat+Room+Escape+San+Antonio!5e0!3m2!1sen!2sus!4v1541445639522"
};
window.onload = loadDeferredIframe;

2 个答案:

答案 0 :(得分:0)

在设置src之前检查元素是否存在,否则您将遇到错误,函数的执行将停止。

function loadDeferredIframe() {
    var tryLoadIFrame = function (ID, URL) {
        var iFrame = document.getElementById(ID);
        if (iFrame) {
            iFrame.src = URL;
        }
    }
    tryLoadIFrame("greYoutube", "https://www.youtube.com/embed/h7_w43jJ0Ts");


    tryLoadIFrame("greMapTempe", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3330.0372197439724!2d-111.96932568528953!3d33.422273980782116!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzPCsDI1JzIwLjIiTiAxMTHCsDU4JzAxLjciVw!5e0!3m2!1sen!2sus!4v1486774192595");


    tryLoadIFrame("greMapCincinnati", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3086.8059851441258!2d-84.4652936843564!3d39.31532112980541!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88404fb4ec94a687%3A0x915a9a0db6e53917!2sGreat+Room+Escape+Cincinnati!5e0!3m2!1sen!2sus!4v1541446663243");


    tryLoadIFrame("greMapCleveland", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2992.564362618732!2d-81.627932484311!3d41.405266202849035!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8830e442a6185089%3A0x90787a2298a6c3c2!2sGreat+Room+Escape+Cleveland!5e0!3m2!1sen!2sus!4v1541446505618");


    tryLoadIFrame("greMapColumbus", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12214.714268930691!2d-82.9792519!3d40.0602736!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd1a0ee0aa5fb171a!2sGreat+Room+Escape+Columbus!5e0!3m2!1sen!2sus!4v1541446346773");


    tryLoadIFrame("greMapAustin", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3443.8281848309443!2d-97.71271668471364!3d30.32740461210432!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644ca3ced1c17f7%3A0x7bd80180add156d1!2sMind+Spark!5e0!3m2!1sen!2sus!4v1472767173729");


    tryLoadIFrame("greMapDallas", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13390.834398025358!2d-96.7070997!3d32.9587021!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x897c1a032f856003!2sGreat+Room+Escape+Dallas!5e0!3m2!1sen!2sus!4v1541446025561");


    tryLoadIFrame("greSanAntonio", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13900.967422077894!2d-98.4774668!3d29.4217269!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xfee289ea3851e800!2sGreat+Room+Escape+San+Antonio!5e0!3m2!1sen!2sus!4v1541445639522");

};
window.onload = loadDeferredIframe;

答案 1 :(得分:0)

有多种解决方法:

1-更改变量src属性之前,检查变量是否不为空:

最基本的方法,但是可能是最多余的(除非您使用@ user1538301的答案之类的辅助函数):

var iframe = document.getElementById("greYoutube");
if(iframe) {
    iframe.src = "https://www.youtube.com/embed/h7_w43jJ0Ts"
}

2-使用jQuery:

即使没有匹配项,使用jQuery通过ID(或任何选择器)修改元素也不会引发错误。

//will always work, even if there is no match
$("#greYoutube").attr("src", "https://www.youtube.com/embed/h7_w43jJ0Ts");

3-使用ID以外的选择器:

第三种方法的优点是最简洁和维护包,因为您不需要复制/粘贴多次有iframe

您可以为要延迟的iframe设置一个特定的类名,以及一个data-src属性(或随意调用),该属性应包含应作为目标iframe的新源的源。让我解释一下:

HTML:

<iframe class='defer' src='someSrc' data-src='https://www.youtube.com/embed/h7_w43jJ0Ts'/>

JS:

//this will not throw an error, because if there is no such element, 
//'iframesToDefer' will be empty and thus we won't enter the loop.
var iframesToDefer = document.getElementsByClassName('defer');
for(var iframe of iframesToDefer) {
    iframe.src = iframe.dataset['src'];
}

顺便提一句,声明一个变量不应超过一次(我指的是您的iframe变量)。