Question

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

我有一个这样的原型，非常......但它会刺激这个东西。你可以check the prototype here。为了使这个原型像它应该的那样工作，你只能点击黄色背景链接。为了完成这项工作，我有iframe的创建名称attribut和链接的目标attribut。

该链接与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）我必须手动将«target»attribut添加到所有不可能的链接，因为这个想法是加载来自不同域名的任何网站。（比如维基百科，英国广播公司等......）。更重要的是，在这个原型中，我保存了页面（维基百科）并上传它们以使其工作，因此它的本地内容。这对我的情况不利。

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/

编辑：添加说明

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

1 个答案: