Question

我创建了一个演示页面来显示响应式网页模板...在演示页面中，有三个不同大小的iFrame（用于计算机视图，平板电脑视图和智能手机视图）......

问题是，当我打开演示页面时，响应式模板加载3次（对于每个iframe）...我不希望这种情况发生...模板页面应该只加载一次它应该显示在所有iframes中......

我不知道怎么做到这一点......有人请帮帮我......

以下是示例演示页面...

http://responsivewebinc.com/demo/?url=http://responsivewebinc.com/templates/responsivewebinc

这是iframe编码......

<iframe id="pc" width="98%" src="http://responsivewebinc.com/templates/responsivewebinc" ></iframe>

<iframe id="tablet" width="60%" src="http://responsivewebinc.com/templates/responsivewebinc" ></iframe>

<iframe id="mobile" width="30%" src="http://responsivewebinc.com/templates/responsivewebinc" ></iframe>

Answer 1

你需要一些javascript：

<iframe id="pc" width="98%" src="http://responsivewebinc.com/templates/responsivewebinc"
    onload="document.getElementById('tablet').src=document.getElementById('mobile').src=this.src;">
</iframe>
<iframe id="tablet" width="60%"></iframe>
<iframe id="mobile" width="30%"></iframe>

其他2个（'table'和'mobile'）内容将从浏览器的cache加载。

重要提示：除非资源未完全加载，否则将不会保存在浏览器的cache 中。

Answer 2

两种提议的解决方案都不起作用。实际上javascript脚本只是等待第一页加载然后设置第二个src。然后这将加载第二页。第三个相同但页面仍为每个iframe加载一次。

只需通过一个需要几秒钟加载的网址来更改网址，您就会看到它。

唯一的解决方案是解析源网址的html，然后将iframe的内容设置为此源，但我不确定这是否可行。

也许尝试类似的东西 main.php：

<?php
    $url = 'http://responsivewebinc.com/templates/responsivewebinc/';
    $ch = curl_init();
    curl_setopt($ch,CURLOPT_URL,$url);
    curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);

    $result = curl_exec($ch);
    curl_close($ch);
    $fp = fopen('data.txt', 'w+');
    fwrite($fp, $result);
?>
<iframe id="pc" width="98%" src="open.php" ></iframe>
<iframe id="tablet" width="60%" src="open.php" ></iframe>
<iframe id="mobile" width="30%" src="open.php" ></iframe>

和open.php：

<?php
    $filename = 'data.txt';
    $fp = fopen($filename, 'r');
    $data = fread($fp, filesize($filename));
    echo $data;
?>

这样可以避免加载三倍的页面，但我不确定这是一个好的脚本（这也需要你为你的css和图像文件使用非相对网址...

在iFrame中加载网页

2 个答案: