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爬虫和性能原因上也有些人少用它的原因。

iframe的常用方法相关推荐

layuiAdmin 框架iframe基础常用方法事件文档
该文档适用于 layuiAdmin.std 常规版(iframe),阅读之前请务必确认是否与你使用的版本对应. 熟练掌握 layuiAdmin 的前提是熟练掌握 layui,因此除了本篇文档, lay ...
webdriver常用方法+鼠标键盘事件+浏览器高级操作
文章目录 webdriver操作元素.获取元素常用方法浏览器控制浏览器cookies 鼠标事件键盘事件 **常用方法** 上传文件内嵌网页iframe切换浏览器标签页切换页面滚动截图警 ...
iframe跨域的几种常用方法
背景随着业务的发展,自然地会有一些公共的业务被抽离成为公共组件共各个项目使用.但是由于各个项目用到的技术栈都有所不同,所以这个公共组件就不能方便地被引用了.为解决这个问题,我们把这个组件写成了单独的 ...
java selenium常用API(WebElement、iFrame、select、alert、浏览器窗口、事件、js) 一
WebElement相关方法 1.点击操作 WebElement button = driver.findElement(By.id("login")); button.clic ...
Python Selenium 常用方法总结
selenium Python 总结一些工作中可能会经常使用到的API. 1.获取当前页面的Url 方法:current_url 实例:driver.current_url 2.获取元素坐标方法:l ...
[Python从零到壹] 九.网络爬虫之Selenium基础技术万字详解（定位元素、常用方法、键盘鼠标操作）
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
html判断是否在页面,html判断当前页面是否在iframe中的实例
html判断当前页面是否在iframe中的实例在做HTML页面的时候,经常会遇到"如果当前页面显示在iframe中,我们就相应的处理" 判断方法为: //判断是否在iframe中 ...
jquery常用技巧及常用方法列表
jquery常用技巧及常用方法列表 1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquer ...
JQUERY对RADIO,CHECKBOX,SELECT的操作常用方法大全
JQUERY对RADIO,CHECKBOX,SELECT的操作 ******************************************************************** ...

iframe的常用方法

iframe的常用方法

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

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

元素。

iframe的html书写：

被引用的代码：

效果图如下：

iframe的好处：

iframe的缺点：

iframe的常用方法相关推荐

最新文章

热门文章

iframe的常用方法

iframe的常用方法

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

iframe的html书写：

被引用的代码：

效果图如下：

iframe的好处：

iframe的缺点：

iframe的常用方法相关推荐

最新文章

热门文章

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

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

元素。