iframe的一些记录

首要要做配置操作，配置两个域名，我这里使用的是Apache。附件中的demo1和demo2

<VirtualHost *:80>

    DocumentRoot "D:/htdocs/iframe/demo1"

    ServerName www.iframe1.cn

</VirtualHost>

<VirtualHost *:80>

    DocumentRoot "D:/htdocs/iframe/demo2"

    ServerName www.iframe2.cn

</VirtualHost>

iframe的一些属性介绍：

属性	值	描述
align	left right top middle bottom	不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。
frameborder	1 0	规定是否显示框架周围的边框。
height	pixels %	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	启用一系列对 <iframe> 中内容的额外限制。 可以在这里做调试
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 <iframe> 看上去像是包含文档的一部分。 可以在这里做调试
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在 <iframe> 中显示的页面的 HTML 内容。 可以在这里做调试
width	pixels %	定义 iframe 的宽度。

 

1、iframe无刷新文件上传

这个上传我服务器端使用的是PHP代码。

 

1 <div style="padding:20px">

2         <h1>1、无刷新上传</h1>

3         <form action="action.php" enctype="multipart/form-data" method="post" target="iframeUpload"> 

4             <iframe name="iframeUpload" width="400" height="400" frameborder='1'></iframe><br/>

5             <input id="file1" name="file1" type="file"> 

6             <input value="上传图片" type="submit"> 

7         </form>

8 </div>

 使用iframe上传的关键点是target="iframeUpload"，这个属性的设置。action.php中的代码如下：

 1 <?php

 2 require_once('upload.php');

 3 header("Content-Type:text/html;charset=utf-8");

 4 $type = array('jpg', 'jpeg', 'png', 'gif');

 5 $path = sprintf('%s/%s/%s/', date('Y'), date('m'), date('d'));

 6 

 7 $upload = new App_Util_Upload('file1', 0, $type);

 8 //获取上传信息

 9 $info = $upload->getUploadFileInfo();

10 $fileName = time() . rand(1000, 9999) . '.' . $info['suffix'];

11 $fullName = $path . $fileName;    

12 $path = rtrim('upload', DIRECTORY_SEPARATOR) . '/' . $fullName;

13 $success = $upload->save($path);

14 $msg = $success ? '上传成功<br/>' : '上传失败<br/>';

15 echo $msg;

16 echo '<img src="'.$path.'" width="300" height="300"/>';

 

2、iframe自适应高度

同域的情况下：

网络中的方法一：直接用onload函数获取iframe中的内容高度，如果页面载入一次以后，高度不变，这招是挺好用的，但是我在firefox与IE中，表现不理想，如图，并没有完全的将页面显示，chrome和safrai的表现不错。

<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" 
frameborder="0" src="autoheight.html" scrolling="no"></iframe>

后面发现，如果在iFrame1.document.body.scrollHeight的后面在加上20的话，iframe也是能完全展现出来的，这个应该是受到了我autoheight.html这个页面里的CSS影响，

autoheight.html中的页面代码是这样的：

 

1 <div style="padding:20px;border:1px solid #000;width:650px">

2         <img src="autoheight.jpg" width="600"><br/>

3         一张图片

4 </div>

为了验证我的猜想，我把padding给去除掉，还是用原先的代码onload="this.height=iFrame1.document.body.scrollHeight"，但事实与我的猜想完全不同