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

Javascript 打开两个iframe而不完全重新加载第二个iframe,javascript,jquery,html,angularjs,iframe,Javascript,Jquery,Html,Angularjs,Iframe,我有一个AngularJS应用程序,它在不同网站的iframe下运行。我有网站的代码。 我需要打开一个新的iframe到同一个AngularJS应用程序,但到一个不同的路由。我不想在新的iframe中再次加载所有应用程序。我正在寻找可以复制现有窗口内容实例的内容,或者可以在不重新加载整个应用程序的情况下打开同一应用程序的新iframe。 下面是代码说明: 我有这个html页面: <div> <iframe src="www.myapp.com/books"><

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

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

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

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

新的iframe将打开相同的应用程序,但路径不同。不幸的是,这将导致同一iframe的应用程序被完全加载,我正在寻找一种方法来防止这种情况。类似于克隆iframe的同一实例并在不完全重新加载的情况下路由到新位置


有什么想法吗?

让我们谈谈JQuery

假设你有一个很好的iframe(iframe实际上不是很好)元素


LINK->在JSFiddle上查看这一切最好的方法可能是在第二个iframe中以文本形式编写应用程序的html/javascript/css。 您可以获得第一个iframe的内容

page=$("#iframe1")).contents().find("html").html();
然后将其设置为第二个iframe

var doc = parent.$("#iframe2")[0].documentElement;
doc.open();
doc.write(html);
doc.close();
你可能不想这样做一个完整的副本,但我认为这是一个起点

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

从和获取的信息

编辑


你想要的可能不是iframes。您可以在主网页中加载一次应用程序的javascript。然后javascript应该下载(或创建)html元素,并将它们注入到一个div中。这样,应用程序的javascript就可以管理您想要的任意多个子帧。缺点是,你可能必须对你的应用程序做很多修改:现在它被设计成一个网页,应该被重写成一个js来管理一些div,将内容放入其中。不幸的是,我没有看到其他解决方案。

如何解决这个问题?这将返回
iframe
的URL。OP想要复制一个iframe。@迈克,我需要另一个iframe。复制第一个的环境并从中创建另一个。对不起,我在手机上阅读了
“你的url在这里”
部分。移动网站不是很好,代码部分的滚动非常糟糕。。。再一次抱歉:)无论如何,我刚刚在github上查看了jQuery代码,在我看来它只是在
iframe
上设置了
src
属性。那么,如果它使用缓存版本或重新加载资源,它不是特定于浏览器吗?好的,您更改了答案:D,但是
clone
方法似乎做了同样的事情-将实际行为留给浏览器。我不完全确定当iframe的src更改时是否应该发生回发。我不认为任何浏览器都是设计出来的,但我必须进行测试。编辑:我的意思是,我不认为父页面应该在其子iframe有新源时回发。(显然iframe必须回发才能加载新页面)@Mike,如果“www.myapp.com/books”有一个javascript引用,它将运行一次。然后,克隆之后,克隆将再次运行该javascript!我希望JavaScript只运行一次,iframe的内容应该是html+css+JavaScript(完整的DOM),所以这种方法有可能奏效。不过,测试取决于您,但我不希望JavaScript再次运行。它已经在第一个iframe中运行。我想复制整个环境,而不仅仅是DOM。我已经放大了我的答案。简言之,答案是你想做的事是做不到的,或者至少我无法想象有什么办法可以做到。另一个解决方案是将自定义内容从第一个iframe注入到第二个iframe:您的应用程序将仅在第一个iframe中运行,但也在第二个iframe中显示内容。这几乎等同于答案中所写的解决方案,要求您重新设计代码,而这可能不是您想要的。