Question

简要说明：：我有一个div，其中装有google maps 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标签更改为的位置

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

我该怎么做？

Answer 1

您可以像这样替换整个标签：

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

Answer 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

Answer 3

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

<script>
$(".main-container iframe").attr("src","www.yahoo.com");
</script>

在div上单击更改其内部html

3 个答案: