如何使用 javascript 更改 iframe 的 src？

Question

我试图创建一个 function 来更改 iframe 的 src。 我创建了四个位置的 url 数组。 但我不知道我是否必须使用const matches = document.querySelectorAll("iframe[data-src]"); 或document.getElementById('myIframe').src 。 总的来说，我在编码方面很新。 每一个建议或建议都将受到欢迎。

HTML

<iframe id= "myiframe" src="https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569:44700750793;2d-56.380275318336025!3d-34.84309361411796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x959f802b6753b221%3A0x3257eb39860f05a6!2sPalacio%20Salvo!5e0!3m2!1sen!2suy!4v1614269355326!5m2!1sen!2suy" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" class ="maps-gallery active"></iframe>

Javascript

function maps(){
var mapsArray = [
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d209569.44700750793!2d-56.380275318336025!3d-34.84309361411796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x959f802b6753b221%3A0x3257eb39860f05a6!2sPalacio%20Salvo!5e0!3m2!1sen!2suy!4v1614269355326!5m2!1sen!2suy",
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d92110.09563909167!2d17.958933187703266!3d59.32686333113927!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x465f763119640bcb%3A0xa80d27d3679d7766!2sStockholm%2C%20Sweden!5e0!3m2!1sen!2suy!4v1614704350417!5m2!1sen!2suy",
"https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy",
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy"

];
document.getElementById('myIframe').src = maps[Math.floor(Math.random() * maps.length)];

}

Answer 1

只要确保您的变量名称是一致的，并且您实际上在某处调用了 function。

（您将myiframe和myIframe都用作框架 ID，并且在maps()中定义mapsArray但然后尝试将其作为maps访问。）

 function maps() { var mapsArray = [ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www.google.com/maps/embed.pb=.1m18.1m12;1m3;1d92110.09563909167!2d17.958933187703266!3d59.32686333113927!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x465f763119640bcb%3A0xa80d27d3679d7766!2sStockholm%2C%20Sweden!5e0!3m2!1sen!2suy!4v1614704350417!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" ]; document.getElementById('myIframe').src = mapsArray[Math.floor(Math.random() * mapsArray.length)]; } maps();

 <iframe id='myIframe'></iframe>