Question

我有一个AngularJS应用程序，它在不同网站的iframe下运行。我有网站的代码。
我需要为同一个AngularJS应用程序打开一个新的iframe，但需要打开另一个路径。我不想在新的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

让我们谈谈这个问题。

假设你有漂亮的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。不幸的是，我没有看到另一种解决方案。

打开两个iframe而不重新加载第二个iframe

2 个答案: