Javascript 在div上单击“更改其内部html”

简介：我有一个

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>

我的代码正在更改

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>

---

我该怎么做？

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

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

$（this.find（'iframe'）。替换为（``）；

您好，您可以执行以下操作：

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行编辑地图

具有填充，以便真正触发您的点击事件

$（“.main container iframe”）.attr（“src”，“www.yahoo.com”）；

由于“X-Frame-Origin”（X-Frame-Origin）选项，它无法工作，您可以详细研究该选项，并为您使用适当的设置。如果需要，您可以在该选项上查看X-Frame-Origin（X-Frame-Origin）错误

HTML

代码

---

为什么要将

src

更改为

https://www.youtube.com/embed/drOnSwo1Ob0

您何时真正需要谷歌地图URL？另外，

src

是唯一不同的元素，因此不需要替换整个元素。如果您确保单击的是div而不是iframe的内容，那么它就可以工作。点击本例中的红色区域：@Turnip问题是OP用youtube URL代替了src，而不是他们真正想要的URL@ChrisG OPs代码清楚地显示了他们从地图到youtube视频的变化。不过这有点无关紧要。问题是在地图内单击不会触发单击事件。@Turnip在问题的末尾，OP发布了替换iframe，它显然使用了不同的google地图URL。由于OP的代码完美地显示了youtube视频，因此可以安全地假设“不工作”意味着“我想要另一张地图，而不是视频”，但我当然可能错了。想一想，我现在更不清楚OP的实际问题是什么，很高兴我能提供帮助，正如我在评论中所说的，虽然这解决了如何用另一个iframe替换iframe的问题，但它完全忽略了实际问题，可能是因为OP问错了问题。@ChrisG是的，我同意更改src属性就足够了。我的解决方案实际上是对问题措辞的回答。执行类似于

$（this.find（'iframe'）.attr的操作（'src'，'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d38490.03849859351！2d75.57911957607793！3d31.3140341618853！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1s0x391a5af2e467dd43%3A0X19B5149BC01FDC3！2泰戈尔+医院+26+心脏+护理+中心+私人+有限公司！5e0！3m2！1sen！2sin！4V15368365464'）

会让人感觉更清楚您完全忽略了要点。问题是错误的替换URL，而不是替换它的方法。@ChrisG我不确定是否理解您的观点。我这边可能理解了miss，但目标是在单击时替换iframe URL。这是我的代码所做的，并且可以在实时版本上轻松检查。您没有参与任何试图解决OP问题的方法，你所做的就是用Vanilla JS替换jQuery代码。@ChrisG我不理解最初的问题，他们不是将map iframe替换为youtube iframe，而是将map iframe替换为另一个map iframe。请接受我对这个巨大错误的真诚道歉。我将立即更新我的答案。祝你好运swer有更好的解释，而这个代码片段可能会解决这个问题，真正有助于提高您的文章质量。请记住，您是在为将来的读者回答这个问题，而这些人可能不知道您的代码建议的原因。

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';
});

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

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

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

iframe{  pointer-events:none;}

const appDiv: HTMLElement = document.querySelector('.sim-row-edit-maps');
appDiv.addEventListener('click', () => {
  appDiv.querySelector('iframe').src = 'https://www.youtube.com';
});