我的代码在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;
答案 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)
有多种解决方法:
src
属性之前,检查变量是否不为空:最基本的方法,但是可能是最多余的(除非您使用@ user1538301的答案之类的辅助函数):
var iframe = document.getElementById("greYoutube");
if(iframe) {
iframe.src = "https://www.youtube.com/embed/h7_w43jJ0Ts"
}
即使没有匹配项,使用jQuery通过ID(或任何选择器)修改元素也不会引发错误。
//will always work, even if there is no match
$("#greYoutube").attr("src", "https://www.youtube.com/embed/h7_w43jJ0Ts");
第三种方法的优点是最简洁和维护包,因为您不需要复制/粘贴多次有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
变量)。