多个Iframe将一个请求发送到同一个SRC

Question

我想知道是否有一种方法可以说3个iframe加载相同的资源（ http：//myservice.php ），只有来自iframe的一个请求。 myservice.php返回一个Html文档，浏览器应以某种方式加载html而不再重新加载所有内容，包括加载的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发送多个http请求的默认方式更有效。 此外，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++){

...
}