[英]How to change the src of a iframe using javascript?
Im trying to create a function that changes the src of iframe.我试图创建一个 function 来更改 iframe 的 src。 I created a array of the url of the four locations.
我创建了四个位置的 url 数组。 but i dont know if i must use
const matches = document.querySelectorAll("iframe[data-src]");
但我不知道我是否必须使用
const matches = document.querySelectorAll("iframe[data-src]");
or a document.getElementById('myIframe').src
.或
document.getElementById('myIframe').src
。 im pretty new in coding in general.总的来说,我在编码方面很新。 Every advice or suggestion will be very welcome.
每一个建议或建议都将受到欢迎。
HTML 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 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)];
}
Just make sure your variable names are consistent, and that you actually call the function somewhere.只要确保您的变量名称是一致的,并且您实际上在某处调用了 function。
(You had both myiframe
and myIframe
as the frame ID, and inside maps()
you defined mapsArray
but then try to access it as maps
instead.) (您将
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.