Question

我有一个iframed页面，我试图替换iframe中唯一的<p>，以便它链接到特定的网址

这是我的代码：

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

我做错了什么？注意：我在CMS中工作，但我可以访问头部和身体标签，并且我可以随意添加脚本。

Answer 1

以下是问题：你在iframe中加载了一些网址。
＆lt; iframe src =“http://someurl.com”＆gt;＆lt; / iframe＆gt;
但是加载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>");

});

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

您可能会在控制台中看到此类错误：
Uncaught SecurityError：无法从'HTMLIFrameElement'读取'contentDocument'属性：阻止具有原点“http://localhost:63342”的框架访问具有原点“http://someurl.com”的框架。协议，域和端口必须匹配。

替换iframe jquery中的HTML

1 个答案: