iframe的用法

时间 2019-11-09

标签 iframe 用法栏目 HTML 繁體版

原文原文链接

有人说，iframe是能耗最高的一个元素，尽可能减小使用。html

也有人说，iframe的安全性太差，尽可能减小使用。浏览器

　　虽然他们说的是真的，可是iframe的强大功能是不容忽视的，并且如今不乏公司正在使用它。安全

　　<iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另外一个文档。框架

　　全部的主流浏览器都支持<iframe>标签。你能够把提示的文字放到 <iframe> 和 </iframe>里面，这样不支持 <iframe>的浏览器就会出现提示的文字。搜索引擎

iframe 如何使用呢？spa

一般咱们使用iframe直接在页面嵌套iframe标签指定的src就能够了。设计

好比：code

    <!-- 
        <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 的经常使用属性：htm

　　 name ：规定 <iframe> 的名称。
       width：规定 <iframe> 的宽度。
       height ：规定 <iframe> 的高度。
       src ：规定在 <iframe> 中显示的文档的 URL。
       frameborder ：规定是否显示 <iframe> 周围的边框。 (0为无边框，1位有边框)。
       align ：　规定如何根据周围的元素来对齐 <iframe>。　(left,right,top,middle,bottom)。
       scrolling ：规定是否在 <iframe> 中显示滚动条。 (yes,no,auto)对象

上面代码中 iframe的src属性为本身本地的一个html页面

代码以下：

<body>
    <div id="div" style="height: 300px; background: #ddd;">这是一个外部文件里面的内容</div>
</body>
<script>
    var div = document.getElementById("div");
    console.log(div);
</script>

有什么交互的部分也是写到这个页面中，iframe会自动传到引入的页面的。

那如何获取iframe里面的内容呢？

    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再也不支持此标签。

查看 frame 的基本用法

1. iframe用法
2. HTML iframe用法
3. iframe 方法的使用
4. iframe标签的用法
5. iframe的各类用法
6. iframe的使用方法
7. Iframe标签的用法
8. Iframe用法精析
9. iframe用法详解
10. iframe用法总结
更多相关文章...
• Redis哨兵（Sentinel）模式的配置方法及其在Java中的用法 - Redis教程
• Spring中Bean的作用域 - Spring教程
• C# 中 foreach 遍历的用法
• 适用于PHP初学者的学习线路和建议