javascript - 多个 Iframe 向同一个 SRC 发送一个请求

Question

我想知道是否有一种方法可以让 3 个 iframe 仅通过来自 iframe 的一个请求来加载相同的资源( http://myservice.php )。 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 的大小也很大，我认为这会影响浏览器。

Answer 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++){

...
}