如何使用 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>