打开两个 iframe 而无需完全重新加载第二个 iframe

Question

我有一个 AngularJS 应用程序，它在不同网站的 iframe 下运行。我有网站的代码。
我需要打开一个新的 iframe 到同一个 AngularJS 应用程序但到不同的路由。我不想在新的 iframe 中再次加载所有应用程序。我正在寻找可以复制窗口内容的现有实例的东西，或者可能会打开同一应用程序的新 iframe 而无需再次加载整个应用程序。
以下是代码说明：
我有这个 html 页面：

<div>
   <iframe src="www.myapp.com/books"></iframe>
</div>

www.myapp.com/books 是一个 AngularJS 应用程序，因此它会加载大量依赖项、执行大量代码并进行一些后端调用。我想添加一个按钮，单击它会打开另一个 iframe 到 html 页面：

 <div>
   <iframe src="www.myapp.com/books"></iframe>
   <iframe src="www.myapp.com/names"></iframe>
</div>

新的 iframe 将打开相同的应用，但路径不同。不幸的是，这将导致同一个 iframe 的应用程序完全加载，我正在寻找一种方法来防止这种情况。就像克隆同一个 iframe 实例并路由到新位置而无需完全重新加载..

有什么想法吗？

Answer 1

让我们谈谈这个问题的 JQuery。

假设你有漂亮的 iframe（iframe 实际上不是很好）元素

<iframe id="original" src="www.myapp.com/books"></iframe>

记下 id 标签。

然后你得到了你的javascript，包含在标签中

var newIframe = $("#original").clone();

$("body").append(newIframe);

LINK ---> Check this all out at JSFiddle <--- LINK!

Answer 2

最好的办法可能是将应用程序的 html/javascript/css 作为文本写入第二个 iframe。 可以获取第一个 iframe 的内容

page=$("#iframe1")).contents().find("html").html();

然后将其设置为您的第二个 iframe

var doc = parent.$("#iframe2")[0].documentElement;
doc.open();
doc.write(html);
doc.close();

你可能不想做这样的完整副本，但我认为这是一个起点。

我认为您的应用程序必须驻留在托管它的网站的同一域中，否则由于跨域脚本安全原因，这将失败。如果是这样，您将不得不更改整个设计，因为您无法在不同的域上操作 iframe。

信息取自How to insert html in iframe 和Getting the html content of an iframe using jQuery

编辑

您想要的可能不是 iframe。您可以在主网页中为您的应用程序加载一次 javascript。然后该javascript应该下载（或创建）html元素，并将它们注入到一个div中。这样做，您的应用程序的 javascript 可以管理您想要的任意数量的子帧。缺点是您可能必须对您的应用程序进行大量更改：现在它被设计为作为网页加载，并且应该重写为管理一些将内容放入其中的 div 的 js。很遗憾，我没有看到其他解决方案。