
iframe是一个内联框架,可以在当前HTML页面中嵌入另一个文档,一般情况下使用iframe直接在页面嵌套iframe标签再指定src就可以了。
有人说,iframe是能耗最高的一个元素,尽量减少使用。也有人说,iframe的安全性太差,尽量减少使用。虽然他们说的是真的,但是iframe的强大功能是不容忽视的,而且现在不乏公司正在使用它。
标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
所有的主流浏览器都支持标签。你可以把提示的文字放到
iframe 如何使用呢?
通常我们使用iframe直接在页面嵌套iframe标签指定的src就可以了。
比如:
1 2 3 4 5 6 7 |
<!-- <iframe> 标签规定一个内联框架 这里写p 标签是为了看align的效果 --> <p style="overflow: hidden;">这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。 <iframe name="myiframe" id="myrame" src="external_file.html" frameborder="0" align="left" width="200" height="200" scrolling="no"> <p>你的浏览器不支持iframe标签</p> </iframe> 这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。</p>
|
iframe 的常用属性:
name : 规定的名称。
width: 规定的宽度。
height :规定的高度。
src:规定在中显示的文档的 URL。
frameborder : 规定是否显示周围的边框。 (0为无边框,1位有边框)。
align:规定如何根据周围的元素来对齐。 (left,right,top,middle,bottom)。
scrolling:规定是否在中显示滚动条。 (yes,no,auto)
上面代码中 iframe的src属性为自己本地的一个html页面
代码如下:
1 2 3 4 |
<body> <div id="div" style="height: 300px; background: #ddd;">这是一个外部文件里面的内容</div></body><script> var div = document.getElementById("div"); console.log(div);</script>
|
有什么交互的部分也是写到这个页面中,iframe会自动传到引入的页面的。
那如何获取iframe里面的内容呢?
1 2 3 4 5 |
var iframe = document.getElementById("myrame"); //获取iframe标签 var iwindow = iframe.contentWindow; //获取iframe的window对象 var idoc = iwindow.document; //获取iframe的document对象 console.log(idoc.documentElement); //获取iframe的html console.log("body",idoc.body);
|
但是,这里面是获取不到里面的DOM的,可以在URL中获取(也就是引入的html文件)
iframe 的优缺点
优点:
重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少数据的传输,减少网页的加载时间);
技术简单,使用方便,主要应用于不需要搜索引擎来搜索的页面;
方便开发,减少代码的重复率(比如页面的header,footer);
缺点:
会产生很多的页面,不易于管理;
不易打印;
多框架的页面会增加服务气得http请求;
浏览器的后退按钮无效等;
由于诸多的缺点,不符合标准网页设计的理念,已经被抛弃,目前的HTML5不再支持此标签。
什么东西可以替代iframe
HTML,iframe有兼容性问题,有什么方法可以替代ifr...我的网页结构如下: 左边是导航,点击导航不同的选项,在右侧显示内容。使用ajax,点击导航时将返回的数据显示在右侧div中。
现在的Web编程,有什么好的方法可以代替Iframe
用div布局替代frameiframe尽量不要用 容易出问题
用div+css代替iframe实现效果:左侧栏点击,右侧页面显示,左边不刷新,只刷新右边页面, 要可以通过添加div层的方式,设置z-index属性,就不需要使用iframe调用新页面了。 一个页面就是很多个层组合成的,一开始是display:none;隐藏状态,通过某个事件,使其显示display:block;即可。参数传递也更方便。
有什么在html中取代iframe的方法吗?就是左边为菜...越简单越好,最好不要脚本埃好像网页有框架不好啊,想找其他方法取代它。
除了JS就是iframe还有就是flash。。。。貌似没别的方法了。
bootstrap的tab可以完全替代标签吗
如果说一个页面是一个容器,里面装了水,那么,iframe就是另外一个小的但是独立的容器,所以说,你的池子里放了一个扎紧的透明塑料袋,袋子里的水即使有颜色,也不会染到池子。 所以iframe最重要的一点就是隔离,隔离样式,隔离逻辑。