学会iframe并用其解决跨域问题

2022-09-14 0 276
资源来源于互联网和网友投稿如有侵权请及时联系客服下架
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险以及产生法律纠纷与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除。
如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

本站只提供资源,不提供技术支持,介意勿下!源码太多站长无法每款都进行测试请自行甄别,虚拟产品售出无退换,下载链接如有失效请及时联系客服

网站部分资源上传至小程序供免费下载

百度小程序 微信小程序

了解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并用其解决跨域问题

获取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.html

document.domain="a.com"

var name2=2
//获取父页面的属性
var name11=parent.window.name1

2、window.name+iframe

实现是基于window.name传递数据。name 在浏览器环境中是一个全局window对象的属性
当在 iframe 中加载新页面时,name 的属性值依旧保持不变。
————————————————
原文链接:https://blog.csdn.net/m0_59345890/article/details/126140635

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)
常见问题

相关文章

发表评论
暂无评论