简要说明:我有一个div
,里面有谷歌地图iframe。当我点击这个div时,我想完全改变内部iframe。我试图用以下代码实现相同,但它无法正常工作。
请指导我错在哪里。
Home.html中
<div class="sim-row-edit-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2598.0908429283936!2d75.5727857336016!3d31.318772374331786!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a5af808690f0f%3A0xc7b0e76486fbe177!2sSapphire+IT+Solutions+Pvt+Ltd!5e0!3m2!1sen!2sin!4v1536835928546" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
的script.js
$(".sim-row-edit-maps").click(function(){
alert("maps clicked");
$(this).find('iframe').attr('src', 'https://www.youtube.com/embed/drOnSwo1Ob0');
});
我的代码正在改变
scr
,因为我想改变整个iframe
tag
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d38490.03849859351!2d75.57911957607793!3d31.314034161618853!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a5af2e467dd43%3A0x19b51499bc01fdc3!2sTagore+Hospital+%26+Heart+Care+Centre+Private+Limited!5e0!3m2!1sen!2sin!4v1536836365464" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
我怎样才能做到这一点 ?
你可以像这样替换整个标签:
$(this).find('iframe').replaceWith(`<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d38490.03849859351!2d75.57911957607793!3d31.314034161618853!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a5af2e467dd43%3A0x19b51499bc01fdc3!2sTagore+Hospital+%26+Heart+Care+Centre+Private+Limited!5e0!3m2!1sen!2sin!4v1536836365464" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>`);
它不起作用,因为“X-Frame-Origin”选项,您可以在X-Frame-Origin上详细研究并为您使用适当的设置。如果您需要,您可以在此codepen上看到x-frame-origin错误。
HTML
<div class="sim-row-edit-maps"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2598.0908429283936!2d75.5727857336016!3d31.318772374331786!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a5af808690f0f%3A0xc7b0e76486fbe177!2sSapphire+IT+Solutions+Pvt+Ltd!5e0!3m2!1sen!2sin!4v1536835928546" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
CSS
iframe{ pointer-events:none;}
码
const appDiv: HTMLElement = document.querySelector('.sim-row-edit-maps');
appDiv.addEventListener('click', () => {
appDiv.querySelector('iframe').src = 'https://www.youtube.com';
});
嗨你可以做这样的事情:
const appDiv: HTMLElement = document.querySelector('.sim-row-edit-maps');
appDiv.addEventListener('click', () => {
appDiv.querySelector('iframe').src = 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d38490.03849859351!2d75.57911957607793!3d31.314034161618853!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a5af2e467dd43%3A0x19b51499bc01fdc3!2sTagore+Hospital+%26+Heart+Care+Centre+Private+Limited!5e0!3m2!1sen!2sin!4v1536836365464';
});
请确保,你的.sim-row-edit-maps
有填充,以真正激发你的点击事件。
<div class="main-container">
<iframe src="www.google.com"></iframe>
</div>
<script>
$(".main-container iframe").attr("src","www.yahoo.com");
</script>