位置: IT常识 - 正文

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

编辑:rootadmin
学会iframe并用其解决跨域问题

推荐整理分享学会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代表无边框。

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

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.name1

2、window.name+iframe

实现是基于window.name传递数据。name 在浏览器环境中是一个全局window对象的属性 当在 iframe 中加载新页面时,name 的属性值依旧保持不变。

本文链接地址:https://www.jiuchutong.com/zhishi/288850.html 转载请保留说明!

上一篇:苏门答腊海岸正在喷发的喀拉喀托火山,印度尼西亚 (© Martin Rietze/Alamy)(苏门答腊岛海岸线多少)

下一篇:下莱茵省的胡内城堡,法国阿尔萨斯大区 (© Leonid Andronov/Alamy)(莱茵地区在德国哪里)

  • 小米飞行模式在哪关(小米飞行模式在哪里调节)

    小米飞行模式在哪关(小米飞行模式在哪里调节)

  • realmex50pro屏幕刷新率是多少(realmex50pro刷miui)

    realmex50pro屏幕刷新率是多少(realmex50pro刷miui)

  • 荣耀x10max屏幕材质是什么呢(荣耀x10 屏幕材质)

    荣耀x10max屏幕材质是什么呢(荣耀x10 屏幕材质)

  • 苹果下载验证码出不来(苹果下载验证码输错次数太多)

    苹果下载验证码出不来(苹果下载验证码输错次数太多)

  • pc移动影视会员和全屏会员的区别(pc移动影视会员可以看电视吗)

    pc移动影视会员和全屏会员的区别(pc移动影视会员可以看电视吗)

  • 华为手机微信语音断断续续(华为手机微信语音来电不响)

    华为手机微信语音断断续续(华为手机微信语音来电不响)

  • 笔记本电脑如何开机进入安全模式恢复系统(笔记本电脑如何连接打印机打印)

    笔记本电脑如何开机进入安全模式恢复系统(笔记本电脑如何连接打印机打印)

  • 镜像初始化错误连接断开什么原因(镜像初始化失败)

    镜像初始化错误连接断开什么原因(镜像初始化失败)

  • 荣耀9x是华为手机吗(荣耀9x是华为手机型号吗)

    荣耀9x是华为手机吗(荣耀9x是华为手机型号吗)

  • 小米12系统什么时候更新(小米12.1.0系统怎么样)

    小米12系统什么时候更新(小米12.1.0系统怎么样)

  • 三星s10语音对方听不清(三星s105g语音)

    三星s10语音对方听不清(三星s105g语音)

  • 淘宝定制的可以退货吗(淘宝定制的可以退货吗发货太慢)

    淘宝定制的可以退货吗(淘宝定制的可以退货吗发货太慢)

  • 相机的raw是什么(相机里raw是什么)

    相机的raw是什么(相机里raw是什么)

  • 小米wifi放大器连不上(小米wifi放大器连不上路由器)

    小米wifi放大器连不上(小米wifi放大器连不上路由器)

  • x30跟x30pro区别(x3和x30pro的区别)

    x30跟x30pro区别(x3和x30pro的区别)

  • 微信新表情包为什么消失了(微信表情包为什么叫sticker)

    微信新表情包为什么消失了(微信表情包为什么叫sticker)

  • airpods2不升级系统能用吗(airpods不升级固件是假吗)

    airpods2不升级系统能用吗(airpods不升级固件是假吗)

  • 大众点评点赞如何删除(大众点评点赞如何取消)

    大众点评点赞如何删除(大众点评点赞如何取消)

  • vue视频添加字幕(vue自动生成字幕)

    vue视频添加字幕(vue自动生成字幕)

  • vivo手机计时器在哪(vivo手机计时器怎么用)

    vivo手机计时器在哪(vivo手机计时器怎么用)

  • 19216801修改wifi密码(19216801修改wifi密码打不开)

    19216801修改wifi密码(19216801修改wifi密码打不开)

  • 华为p30pro卡槽在哪(华为p30pro卡槽是哪个孔)

    华为p30pro卡槽在哪(华为p30pro卡槽是哪个孔)

  • 合同管理的重点是什么(合同管理的重点和难点有哪些)

    合同管理的重点是什么(合同管理的重点和难点有哪些)

  • 虚拟存储器是什么(虚拟存储器什么意思)

    虚拟存储器是什么(虚拟存储器什么意思)

  • 在 js 中,reduce() 的详解 以及使用方法(js中reduce用法)

    在 js 中,reduce() 的详解 以及使用方法(js中reduce用法)

  • 【未完待续】综述:用于视频分割(Video Segmentation)的深度学习(未完待续百度百科)

    【未完待续】综述:用于视频分割(Video Segmentation)的深度学习(未完待续百度百科)

  • vue大型电商项目尚品汇(前台篇)day03(vue网上商城项目)

    vue大型电商项目尚品汇(前台篇)day03(vue网上商城项目)

  • 餐饮发票不是增值发票吗
  • 个人天猫怎么开网店
  • 个人所得税是什么意思有什么用
  • 股权转让分期付款合同范本
  • 通行费电子发票可以抵扣吗
  • 补缴企业所得税的计算公式
  • 滴滴出行发票可以抵扣进项税吗
  • 集团公司内部调动
  • 企业所得税的营业成本怎么算
  • 服务费做成本分录
  • 年终奖金怎么发放
  • 小规模纳税人月超15万季度不超45万
  • 餐饮增值税
  • 去年的税还能退吗
  • 小规模纳税人月末结转增值税
  • 公司承担的个人所得税怎么做分录
  • 股东垫支开办费
  • 多交增值税如何退回
  • 房地产所得税税负率计算公式
  • 税务局收到企业发票
  • 以前年度记账错误
  • 机打发票验旧是什么意思
  • 清算结业是什么意思
  • 补领以前月份的工资如何计算个人所得税?
  • 单位低价向职工售房个人所得税计算
  • 附加税是销项税减去进项税
  • 股金属于金融产品吗
  • 公司0申报怎么做账
  • 亏损计提递延
  • 长期股权投资和资本公积关系
  • 对账工作的主要内容为什么不包括账表核对
  • windows问题报告桌面一直闪
  • linux怎么查找
  • 小规模纳税人如何缴纳企业所得税
  • linux中free命令详解
  • 鸿蒙系统如何设置定位
  • 进项发票丢失怎么补救
  • php堆和栈
  • vue3 global
  • 在途货物退货
  • 海带下载
  • 合规检查中检查不了的设备
  • vue插槽类型
  • php curl_setopt
  • 个体工商户社保扣费不成功
  • 资产处置损益怎么结转到本年利润
  • 企业扣税方式
  • 一般纳税人只有进项怎么报税
  • 批处理命令在windows操作中的典型应用
  • 员工福利费的账务处理
  • 应收处理的两大内容是什么
  • sql纵表转横表
  • 可供出售交易性金融资产初始计量
  • 欠款在公司注销怎么处理
  • sql共享
  • 城市基础设施配套费征收管理规定
  • 短期借款的实际利率与现金折扣的关系
  • 民间非营利政府是指什么
  • 2020年申报期截止时间
  • 开发成本期末如何结转
  • 旅行社差额征收怎么报税
  • 什么是代扣代缴税收缴款凭证
  • 期初数不对怎么办
  • 商品降价如何进行投诉
  • 私营公司融资租房合法吗
  • 数据表的联接
  • mysql5.7.32免安装教程
  • mysql多表内连接查询
  • mysql 临时表
  • win10右下角功能列表不见了
  • linux shell脚本编写实例
  • linux系统中限定系统口令的长度
  • android开发流程
  • ecmascript6入门
  • unity调用c++动态库
  • jquery获取file文件
  • jquery第十章上机
  • 国家税务总局,湖北省税务局
  • 湖南省税局
  • 房产税可以抵扣增值税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设