iframe的常用方法

来源：互联网发布：网络诊断dns未响应原因编辑：程序博客网时间：2024/05/16 12:14

iframe的常用方法

定义和用法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

兼容
所有浏览器都支持 <iframe> 标签。但是在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe

元素。

iframe的html书写：

<!DOCTYPE html><html manifest="test.manifest"><head><meta charset="UTF-8"><title>iframe</title><meta name="format-detection" content="telephone=no"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="stylesheet" href="css/reset.css"><script type="text/javascript" src="js/jquery-2.1.4.min.js"></script><style>.index {width: 500px;height: 500px;margin: 0 auto;border: 1px solid #000;}.index h1 {width: 100%;height: 50px;border-bottom: 1px solid #000;line-height: 50px;font-size: 24px;text-align: center;}/*被引用的代码需要显示出来的范围设置*/.iframe {overflow: hidden;width: 500px;height: 449px;}</style></head><body><div class="index"><h1>index的标题（iframe）</h1><iframe BORDER="3" src="test.html" frameborder="0" class="iframe"></iframe></div><script type="text/javascript" src="js/page.js"></script></body></html>

被引用的代码：

<!DOCTYPE html><html manifest="test.manifest"><head><meta charset="UTF-8"><title>iframe</title><meta name="format-detection" content="telephone=no"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="stylesheet" href="css/reset.css"><script type="text/javascript" src="js/jquery-2.1.4.min.js"></script><style>.test {width: 500px;height: 400px;margin: 0 auto;border: 1px solid #003;background: red;}</style></head><body><div class="test">我是通过iframe进来的代码-可复用的代码</div><script type="text/javascript" src="js/page.js"></script></body></html>

效果图如下：

iframe的好处：

1.它属于html的独立封装，可以把需要的代码分成一个个html的模块存储，需要的时候进行引用，代码复用上挺好的。
2.它另外一个非常霸道的地方在于2个页面中有遇到重复命名的时候它的css和js不会互相冲突，对于团队开发命名上可以很好的避免同名冲突。

iframe的缺点：

1.因为它属于外部引入其他html代码，iframe引入的这些html爬虫是爬不到的，所以在seo方面是个坑。
2.并且是引入外来html的代码，需要再次向服务器请求，而且它对浏览器的性能损耗相对div提高十几倍，加载速度上会慢一点。
因此面对seo爬虫和性能原因上也有些人少用它的原因。

0 0

iframe的常用方法

iframe的常用方法

定义和用法iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。兼容所有浏览器都支持 <iframe> 标签。但是在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。

iframe的html书写：

被引用的代码：

效果图如下：

iframe的好处：

iframe的缺点：

定义和用法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

兼容
所有浏览器都支持 <iframe> 标签。但是在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe

元素。