位置: IT常识 - 正文
推荐整理分享学会iframe并用其解决跨域问题(iframe vh),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:iframe作用,iframe调用,iframe调用,iframe的使用和例子,使用iframe有哪些缺点,如何使用iframe,iframe的使用和例子,如何使用iframe,内容如对您有帮助,希望把文章链接给更多的朋友!
了解iframe
官方定义为:iframe是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。
简单理解为:iframe是一个内联框架,可以在当前HTML页面中嵌入另一个文档。
iframe的属性
这里只介绍常用属性
name:规定 <iframe> 的名称。
width:规定 <iframe> 的宽度。
height:规定 <iframe> 的高度。
src:规定在 <iframe> 中显示的文档的 URL。
frameborder:HTML5 不支持。规定是否显示 <iframe> 周围的边框。属性值为1或者0,1代表有边框,0代表无边框。
scrolling:HTML5 不支持。规定是否在 <iframe> 中显示滚动条。属性值为yes、no、auto。
align:HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe>。属性值有left、right、middle、top、bottom
简单演示:
<h1>演示iframe的使用</h1> <iframe src="http://www.bilibili.com" name="ifr" frameborder="1" height="400" width="600" scrolling="no">你的浏览器不支持该iframe标签</iframe>我们设置了一个名为ifr,宽为600,高为400,显示边框,隐藏滑动条,显示文档为b站(也可以选择本地html文档)的内联框架。 我们可以在iframe标签中写上文字说明,因为有一些低版本浏览器不支持这个标签,显示不了文档的时候就会在页面显示我们写的文字。
打开浏览器看下效果:
获取iframe内的内容
<h1>演示iframe的使用</h1> <iframe src="./t1.html" id="myiframe">你的浏览器不支持该iframe标签</iframe> <script> //获取iframe标签 var myiframe=document.querySelector("#myiframe") //获取它的window对象 var mywindow=myiframe.contentWindow //获取它的document对象 var mydocument=mywindow.document </script>解决跨域问题
1、document.domain+iframe
这个方法只能用于同一个主域下不同子域之间的跨域请求,比如a.com和1.a.com 之间,1.a.com和2.a.com 之间。
只要把两个页面的document.domian都指向主域就可以了,比如document.domain="a.com"。
父页面通过iframe嵌入子页面,通过iframe.contentWindow获取子页面的window,即可操作子页面,子页面通过parent.window和parent来访问父页面的window。
写个例子:
//父页面http://a.com/a.html<iframe id="myiframe" src="http://1.a.com"></iframe><script> document.domain="a.com" var myiframe=document.queryselector("#myiframe") var name1=1 //获取子页面的属性 var name22 = myiframe.contentWindow.name2;</script>//子页面 http://1.a.com/b.htmldocument.domain="a.com"var name2=2//获取父页面的属性var name11=parent.window.name12、window.name+iframe
实现是基于window.name传递数据。name 在浏览器环境中是一个全局window对象的属性 当在 iframe 中加载新页面时,name 的属性值依旧保持不变。
上一篇:苏门答腊海岸正在喷发的喀拉喀托火山,印度尼西亚 (© Martin Rietze/Alamy)(苏门答腊岛海岸线多少)
下一篇:下莱茵省的胡内城堡,法国阿尔萨斯大区 (© Leonid Andronov/Alamy)(莱茵地区在德国哪里)
友情链接: 武汉网站建设