javascript - 替换 iframe jquery 中的 HTML

Question

我有一个 iframe 页面，我正在尝试替换唯一的 <p>在 iframe 中，以便链接到特定的 url

这是我的代码:

$("#custom-iframe").contents().find("p").replaceWith("<p><a href='http://www.myurl.com'>blah blah blah.</a></p>");

我做错了什么？注意:我正在 CMS 中工作，但是我确实可以访问 head 和 body 标签，并且可以在需要的地方添加脚本。

Answer 1

问题是这样的:您在 iframe 中加载了一些 url。
<iframe src="http://someurl.com"></iframe>
但是加载 url 需要一些时间，浏览器必须发送请求并接收响应并将响应显示在 iframe 元素中。
但 javascript 不会等待响应，它会为请求的 load 事件附加一个监听器，然后执行下一行。因此，当您的代码执行时，iframe 元素可能为空，因为 iframe src url 的响应尚未到达。
正确的处理方法是:

$("#custom-iframe").on('load',function()
{
  $(this).contents().find("p").replaceWith("<p><a href='http://www.myurl.com'>blah blah blah.</a></p>");

});

理论上这应该可行，因为当加载事件触发时，URL 加载已完成，并且外部页面的所有元素都可用。
但还要记住的一件事是:
出于安全原因，当父 pageurl 和 iframe pageurl 的协议(protocol)和域不同时，浏览器不允许修改 iframe 中加载的外部页面。

您可能会在控制台中看到此类错误:
未捕获的安全错误:无法从“HTMLIFrameElement”读取“contentDocument”属性:阻止来源为“http://localhost:63342”的框架访问来源为“http://someurl.com”的框架。协议(protocol)、域和端口必须匹配。