当前位置:网站首页>学会iframe并用其解决跨域问题
学会iframe并用其解决跨域问题
2022-08-04 03:08:00 【M78_国产007】
了解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.html
document.domain="a.com"
var name2=2
//获取父页面的属性
var name11=parent.window.name1
2、window.name+iframe
实现是基于window.name传递数据。name 在浏览器环境中是一个全局window对象的属性
当在 iframe 中加载新页面时,name 的属性值依旧保持不变。
边栏推荐
- STM8S-----选项字节
- 基本表单验证流程
- golang中的unsafe.Pointer,指针,引用
- 机器学习模型的“可解释性”
- Pine Script | How to display and typeset a plot switch?
- pytorch applied to MNIST handwritten font recognition
- 数据湖(二十):Flink兼容Iceberg目前不足和Iceberg与Hudi对比
- There are n steps in total, and you can go up to 1 or 2 steps each time. How many ways are there?
- 函数,递归以及dom简单操作
- STM8S105k4t6c--------------点亮LED
猜你喜欢
Flink原理流程图简单记录
Gigabit 2 X light 8 electricity management industrial Ethernet switches WEB management - a key Ring Ring net switch
仿牛客论坛项目梳理
基地址:环境变量
单片机C语言->的用法,和意思
Y86. Chapter iv Prometheus giant monitoring system and the actual combat, Prometheus storage (17)
哎,又跟HR在小群吵了一架!
sqoop ETL工具
小程序+新零售,玩转行业新玩法!
数组相关 内容 解析
随机推荐
SQL注入中 #、 --+、 --%20、 %23是什么意思?
安装postgis时报找不到“POSTGIS_VERSION”这个函数
深度学习(三)分类 理论部分
Taurus.MVC WebAPI 入门开发教程1:框架下载环境配置与运行(含系列目录)。
复制带随机指针的链表
函数,递归以及dom简单操作
Utilities of Ruineng Micrometer Chip RN2026
仿牛客论坛项目梳理
kingbaseES V8R2/R3 表在指定表空间,为何显示为默认表空间?
STM8S project creation (STVD creation) --- use COSMIC to create a C language project
Detailed analysis of scaffolding content
系统太多,多账号互通如何实现?
2022.8.3-----leetcode.899
LeetCode每日一题(2285. Maximum Total Importance of Roads)
STM8S-----option byte
Dong mingzhu live cold face away, when employees frequency low-level mistakes, no one can understand their products
自定义通用分页标签01
2022年最新海南建筑八大员(材料员)模拟考试试题及答案
Homemade bluetooth mobile app to control stm8/stm32/C51 onboard LED
2千兆光+6千兆电导轨式网管型工业级以太网交换机支持X-Ring冗余环网一键环网交换机