iframe怎么用?替代iframe的最好方法 什么东西可以替代iframe
2022-08-10 14:43:13    经济资讯网

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最重要的一点就是隔离,隔离样式,隔离逻辑。

关键词: 替代iframe的最好方法 什么东西可以替代iframe 用什么替代iframe