首要要做配置操作,配置两个域名,我这里使用的是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 |
启用一系列对 可以在这里做调试
|
scrolling | yes no auto |
规定是否在 iframe 中显示滚动条。 |
seamless | seamless | 规定 可以在这里做调试
|
src | URL | 规定在 iframe 中显示的文档的 URL。 |
srcdoc | HTML_code | 规定在 可以在这里做调试
|
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 ? '上传成功
' : '上传失败
'; 15 echo $msg; 16 echo '$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",但事实与我的猜想完全不同