在做web前台的时候,我们会用到框架的概念,他是在当前的页面中引用另外一个页面,比如之前用到的天气插件,就是早某个div里用iframe 然后src=“某个网址”,其实iframe用了好多年了,有的人说不好用,如果引用的页面不存在了,他就会变成404not fount 十分难看,但是它能存在这么多年,现在还在用着自然有他存在的价值,其实做web开发,就是跟着需求走,需要到了,iframe不用也得用,这个时候就看你的水平了,不要让iframe的丑陋暴漏在用户面前就是ok啦。iframe要讲的包括iframe的用法,如何父子页面联动,参数传递,要到的场景等等。
1 用法:<iframe id="iframeid" src="" frameborder="no" border="0" width="100%"
style="height:600px" scrolling="yes"></iframe>
正常的设置一下iframe的src属性就可以了,但是为了样式美观一下,还是设置一下宽度高度和样式吧,如果包含的网页内容有限,不会超出正常的宽度和高度,可以设置不显示滚动条 scrolling=”no” 我感觉我边框设置为0是必须选择的!
2 父页面获取iframe的属性:很多时候iframe都是作为子页面 ,而父页面触发了某个事件,子页面要作出相应的变换,刷新或者跳转页面,实现这并不难,改变iframe的src属性值就可以了,但是父页面如何跨域调用子页面的内容呢?Javascript给我们一个方案
var page = $("#iframeid"); //jquery版
var page = document。getElementById("iframeid");//javascript
改变页面内容,这样看起来的效果就是仅仅刷新了网页的部分内容,有点异步请求的味道
page.attr("src","");//jquery版
page.setAttribute("src","");//javascript
3 子页面和父页面互相调用对方的对象:很多时候 父页面和子页面的内容是关联的,比如在子页面操作了数据库的某个值,而父页面恰恰显示这个值的当前值,如果子页面发生变化的时候,父页面还无动于衷,这就造成不好的用户体验,所以需要刷新页面的这个值,当然刷新是在子页面中进行的,利用ajax技术即可,现在的问题就来了,如何在子页面中调用父页面的元素呢?同样的道理,在父页面中如何调用子页面的对象?当然还得用Javascript
问题说了一大堆,其实很简单:
父页面调用子页面的对象:var obj= window.frames[“iframeid”].document.getElementById(“myH1”);
子页面调用父页面的对象:var obj= parent.document.getElementById(“myH2”);
Javascript调用必须要知道ID和form表单传数据必须要知道name!
4 把iframe设置成透明的背景色,有时候是很有必要的
style="background-color=transparent"//css
allowTransparency="true"//iframe 属性
5 有的地方还提到自适应高度等等,其实只要在iframe外边设置一个div就能解决位置问题,而不需要自适应。