多个 iframe 向同一个 SRC 发送一个请求答案

【问题标题】：Multiple Iframes sending ONE request to the same SRC多个 iframe 向同一个 SRC 发送一个请求
【发布时间】：2016-07-30 00:48:34
【问题描述】：

我想知道是否有办法让 3 个 iframe 加载相同的资源 (http://myservice.php)，而 iframe 只有一个请求。 myservice.php 返回一个 Html 文档，浏览器应该以某种方式加载 html 而无需重新加载所有内容 2 次，包括加载的 HTML 文档中的 CSS 和 JS。换句话说，是否可以仅从第一个 iframe 发送 1 个请求来从 myservice.php 加载 HTML 文档，而让其他 2 个 iframe 加载相同的 html 而无需发送额外的 http 请求。

<iframe id="iframe1" src="myservice.php"></iframe>//should send only request
<iframe id="iframe2" src="myservice.php"></iframe>//use the already loaded data without sending an additonal http request
<iframe id="iframe3" src="myservice.php"></iframe>

我曾考虑使用 jsonp 存储 html（以避免跨域问题）并将其存储在一个变量中，但我不确定它是否比使用多个 iframe 向我的 . php。此外，html 的大小也很重，我认为这会影响浏览器。

【问题讨论】：

标签： javascript html iframe cross-domain src

【解决方案1】：

我认为您需要为此使用 javascript。

获取您的框架并为每个框架分配一个不同的 ID：

<iframe name="iframe1" id="f1" src="old.html"></iframe>
<iframe name="iframe2" id="f2" src="old.html"></iframe>
<iframe name="iframe3" id="f3" src="old.html"></iframe>

调用函数：

<a href="#" onClick="multipleFrames('new.html');">change iframes</a>

最好在函数中传递 URL。这使您的代码更具可重用性。

然后创建一个函数，将 url (u) 传递给该函数。

function multipleFrames(u){ //url
    var frames=window.frames;
    for (var i=1; i<3; i++){

        var frame="f"+i;
        document.getElementById(frame).src = u;
    }
}

如果你在不同的地方有不同数量的 iframe，你也可以传递 iframe 的数量

<a href="#" onClick="multipleFrames('new.html','3');">change iframes</a>

     function multipleFrames(u,n){ //url, number of iframes
                var frames=window.frames;
                var total=n+1;
                for (var i=1; i<total; i++){

...
}

【讨论】：