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爬虫和性能原因上也有些人少用它的原因。
转载请注明原文地址: https://ju.6miu.com/read-14143.html
