iframe（不同域）中的所有链接必须在新 div 中打开

Question

这个想法是在 iframe 中加载一个网页（例如 wikipedia.com），并且单击该页面的每个链接都必须创建一个包含链接内容的新 div。 就像您在冲浪，从一页到另一页，但您将看到的每一页都卡在一个页面中。因此，在您的冲浪结束时，您将拥有所访问页面的所有历史记录。

我有一个原型，非常……怪人，但它刺激的东西。你可以check the prototype here。为了使这个原型能够正常工作，您只能点击黄色背景链接。为了完成这项工作，我为 iframe 创建了名称属性，并为链接创建了目标属性。

链接的目标与 iframe 的名称相同。例如：

<a href="Hyperlien_Wikipedia.html" class="color" <strong>target="iframe_a"</strong> title="Hyperlien">hyperliens</a>

<div id="wrap2">
    <iframe class="frame"  frameborder="1" <strong>name="iframe_a"</strong>  src=""  >
    </iframe>
</div>

当然，这个原型只是模拟了它的外观，但并不是真正的制作方法。

所有的问题都在这里：

1) 我必须手动将“目标”属性添加到所有链接，这是不可能的，因为这样做是为了加载来自不同域名的任何网站。 （如维基百科、英国广播公司等……）。此外，在这个原型中，我保存了页面（维基百科）并上传它们以使其工作，使其成为本地内容。这对我的情况不利。

2）我知道同源策略不允许父页面和子iframe（具有不同的域名）之间的通信。据我说，如果我想设置所有标签链接在新的 div 中显示它们的内容，我必须与子 iframe 进行通信。

所以我想知道我应该怎么做……我需要最简单的方法，因为我对 html/css 没问题，但我是 js 的新手……。我想知道如果我使用 chrome 扩展是否会更容易，比如用 background.js api 注入 js。我也听说过postMessage solution，以便与 iframe 进行通信，即使他们有不同的域名。但我不知道这个解决方案是否适合这种情况。

我在等你的回答:)

Answer 1

您可以使用 jQuery 来监听内容何时发生变化。如果是这样，您将阻止默认设置（不要更改内容）并创建一个新的 iframe/div。

$("#iframeid").load(function(event){
  //prevent normale action
  event.preventDefault();

  //create new div/iframe
  [...]
}

此代码未经测试，也会在 iframe 初始加载时触发。也许你可以在那里找到一些解决方法，但我想你明白了。

来源：

iFrame src change event detection?,

http://api.jquery.com/event.preventdefault/

编辑：添加说明