1

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

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

我不知道如何实现这一目标...有人请帮助我...

这是示例演示页面...

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>
4

2 回答 2

0

你需要一些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.

于 2012-07-14T13:26:25.417 回答
-1

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

只需将 url 更改为需要几秒钟才能加载的 url，您就会看到它。

唯一的解决方案是解析源 url 的 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 和图像文件使用非相对 url ......

于 2012-07-14T14:35:52.553 回答