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

Posted 2023-03-05

【中文标题】打开两个 iframe 而无需完全重新加载第二个 iframe

【英文标题】：Open two iframes without full reload of the second iframe

【发布时间】：2014-02-11 16:48:02

【问题描述】：

我有一个 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 实例并路由到新位置而无需完全重新加载..

有什么想法吗？

【参考方案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!

【讨论】：

如何解决这个问题？这将返回iframe 的URL。 OP 想要复制一个 iframe。

@Mike，我需要另一个 iframe。复制第一个环境并从中创建另一个环境。

我在手机上阅读了"your url here" 部分，抱歉。移动网站不太好，代码部分的滚动非常糟糕......对不起，再次:) 不管怎样，我只是看了 github 上的 jQuery 代码，在我看来它只是设置了src iframe 上的属性。那么，如果它使用缓存版本或重新加载资源，它不是特定于浏览器的吗？好吧，您更改了答案：D，但 clone 方法似乎做同样的事情 - 将实际行为留给浏览器。

我不完全确定在 iframe 的 src 更改时是否应该发生回发。我认为任何浏览器都不是故意这样做的，但我必须进行测试。编辑：我的意思是说，当它的子 iframe 有一个新的来源时，我认为父页面不应该回发。 （显然 iframe 必须回发才能加载新页面）

@Mike，如果 'www.myapp.com/books' 有 javascript 引用，它将运行一次。然后，克隆后，克隆将再次运行该 javascript！我希望该 JavaScript 运行一次。

【参考方案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 的内容应该是 html+css+javascript（完整的 DOM），所以这种方法有可能会奏效。但是，测试取决于您。

但我不希望 JavaScript 再次运行。它已经在第一个 iframe 中运行。我想复制整个环境，而不仅仅是 DOM。

我扩大了答案。简而言之，答案是无法完成您想要的事情，或者至少我无法想象有任何方法可以做到。另一种解决方案是将自定义内容从第一个 iframe 注入到第二个 iframe：您的应用程序将仅在第一个 iframe 中运行，但也在第二个 iframe 中显示内容。它几乎等同于答案中编写的解决方案，需要您重新设计代码，这可能不是您要寻找的。​​span>