在div上单击更改其内部html

问题描述 投票:0回答:4

简要说明:我有一个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,因为我想改变整个iframetag

<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>

我怎样才能做到这一点 ?

javascript jquery html
4个回答
3
投票

你可以像这样替换整个标签:

$(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>`);

0
投票

它不起作用,因为“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';
});

-2
投票

嗨你可以做这样的事情:

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有填充,以真正激发你的点击事件。

live Sample


-2
投票
<div class="main-container">
    <iframe src="www.google.com"></iframe>
</div>

<script>
$(".main-container iframe").attr("src","www.yahoo.com");
</script>
© www.soinside.com 2019 - 2024. All rights reserved.