iframe的使用方法？iframe框架使用方法
本篇文章给大家谈谈iframe的使用方法，以及iframe框架使用方法对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
框架嵌套iframe标签常见的几种使用方法
先来看看百度百科对于iframe标签元素的介绍！都是比较详细，接着就是实际的应用了！
2
新建一个记事本文件，并将它重命名为.html文件，添加必要的<html><body>标签，为了便于说明，同时添加<head>和<title>，将标题改名为iframe元素标签的使用！
3
在<body>中添加iframe，ulr为你要嵌套网页的地址，需要带上http的，由于经验不上带有网址，不演于演示，width，height为所占用的宽度和高度，以百度首页为例，当然嵌套两个网页也是可以的!
4
当然嵌套两个网页或者多个网页也是可以的，高度和宽度都可以自行设置！
5
再看其他的比较常用的可选属性，如name，通过对定义好的名字，就指定框架页面进行跳转！
6
至于其他可选属性，就不再一一举例，看看解析，再试验一下就清楚了，如scrolling="no"就是不显滚动条，align控制框架的对齐方式等等，用法都差不多！
7
源代码：
<html>
<head>
<title>iframe元素标签的使用</title>
<body>
<a rel="external nofollow" href="url" target="iframe1">跳转到百度经验</a><br/>
<iframe src="url" width="600px" height="400px" name="iframe1"scrolling="no"/>
<iframe src="url" width="600px" height="400px" name="iframe2" align="right"/>
</body>
</head>
</html>
求:<Frameset>与<iFrame>详尽使用方法与详解!
Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文件嵌入在另一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，甚至可以在同一HTML文件嵌入多个HTML文件。
在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或子窗体中访问父窗体都必须清楚对象层次，才能通过程序来访问并控制窗体。
下面是浮动帧标记Iframe的各项属性：
一、基本语法：
<iframe>……</iframe>
浮动帧标记Iframe必须成对出现，即有开始标记<iframe>，就必须有结束标记</iframe>。
二、浮动帧标记Iframe的属性：
1、文件位置：
语法：src=url
说明：url为嵌入的HTML文件的位置，可以是相对地址，也可以是绝对地址。
示例：<iframe src="iframe.html">
2、对象名称：
语法：name=#
说明：#为对象的名称。该属性给对象取名，以便其他对象利用。
示例：<iframe src="iframe.html" name="iframe1">
3、ID选择符：
语法：id=#
说明：指定该标记的唯一ID选择符。
示例：<iframe src="iframe.html" id="iframe1">
4、容器属性：
语法：height=# width=#
说明：该属性指定浮动帧的高度和宽度。取值为正整数（单位为像素）或百分数。
height：指定浮动帧的高度；
width：指定浮动帧的宽度。
示例：<iframe src="iframe.html" height=400 width=400>
5、尺寸调整：
语法：noresize
说明：IE专有属性，指定浮动帧不可调整尺寸。
示例：<iframe src="iframe.html" noresize>
6、边框显示：
语法：frameborder=0、1
说明：该属性规定是否显示浮动帧边框。
0：不显示浮动帧边框；
1：显示浮动帧边框。
示例：<iframe src="iframe.html" frameborder=0>
<iframe src="iframe.html" frameborder=1>
7、边框厚度：
语法：border=#
说明：该属性指定浮动帧边框的厚度，取值为正整数和0，单位为像素。为了将浮动帧与页面无缝结合，border一般等于0。
示例：<iframe src="iframe.html" border=1>
8、边框颜色：
语法：bordercolor=color
说明：该属性指定浮动帧边框的颜色。color可以是RGB色（RRGGBB），也可以是颜色名。
示例：<iframe src="iframe.html" bordercolor=red>
9、对齐方式：
语法：align=left、right、center
说明：该属性指定浮动帧与其他对象的对齐方式。
left：居左；
right：居右；
center：居中。
示例：<iframe src="iframe.html" align=left>
<iframe src="iframe.html" align=right>
<iframe src="iframe.html" align=center>
10、相邻间距：
语法：framespacing=#
说明：该属性指定相邻浮动帧之间的间距。取值为正整数和0，单位为像素。
示例：<iframe src="iframe.html" framespacing=10>
11、内补白属性：
语法：hspace=# vspace=#
说明：该属性指定浮动帧内的边界大小。取值为正整数和0，单位为像素。两个属性应同时应用。
hspace：浮动帧内的左右边界大小；
vspace：浮动帧内的上下边界大小。
示例：<iframe src="iframe.html" hspace=1 vspace=1>
12、外补白属性：
语法：marginheight=# marginwidth=#
说明：该属性指定浮动帧的边界大小。取值为正整数和0，单位为像素。两个属性应同时应用。
marginheight：浮动帧的左右边界大小；
marginwidth：浮动帧的上下边界大小。
示例：<iframe src="iframe.html" marginheight=1 marginwidth=1>
详解iframe跨域的几种常用方法(小结)
背景
随着业务的发展，自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同，所以这个公共组件就不能方便地被引用了。为解决这个问题，我们把这个组件写成了单独的页面挂到一个域名下，其他项目采用iframe或者webview的方式去加载这个页面，从而实现功能的简单复用。
不过这过程中也产生了很多问题，单是跨域就会出现好几次了。以下我将会介绍我遇到的跨域问题以及一些解决方法。
为什么会跨域
为了保证用户信息的安全，95年的时候Netscape公司引进了同源策略，里面的同源指的是三个相同：协议、域名、端口。
违反了同源策略就会出现跨域问题，主要表现为以下三方面：
无法读取cookie、localStorage、indexDB
DOM无法获得
ajax请求无法发送
场景
最近在做一个需求，需要用iframe引入一个别人封装好的类似视频播放器的东西。iframe里面有一个全屏的按钮，点击后需要页面让iframe全屏，由于受到同源策略的限制，iframe无法告诉页面全屏。
解决办法
设置domain
document.domain作用是获取/设置当前文档的原始域部分，同源策略会判断两个文档的原始域是否相同来判断是否跨域。这意味着只要把这个值设置成一样就可以解决跨域问题了。
在此我将domain设置为一级域名的值，a页面url为a.demo.com，a页面中iframe引用的b页面url为b.demo.com，具体设置为
document.domain='demo.com'
设置完之后，在a页面的window上挂载使iframe全屏的方法
// a页面
window.toggleFullScreen=()=>{
// do something
}
在b页面上可以直接获取到a页面的window对象并直接调用
// b页面
window.parent.toggleFullScreen()
但是这个值的设置也有一定限制，只能设置为当前文档的上一级域或者是跟该文档的URL的domain一致的值。如url为a.demo.com，那domain就只能设置为demo.com或者a.demo.com。因此，设置domain的方法只能用于解决主域相同而子域不同的情况。
使用中间页面
我们还可以使用一个与a页面同域名但不同路由的c页面作为中间页面，b页面加载c页面，c页面调用a页面的方法，从而实现b页面调用a页面的方法。具体操作如下：
在a页面的node层新开一个路由，此路由加载一个c页面作为中间页面，c页面的url为a.demo.com/c。c页面只是一个简单的html页面，在window的onload事件上调用了a页面的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.onload= function(){
parent.parent.toggleFullScreen();
}
</script>
</body>
</html>
由于c页面和a页面是符合同源策略的，所以可以避开跨域问题，执行全屏的方法。
postmessage
window.postMessage方法可以安全地实现跨源通信，写明目标窗口的协议、主机地址或端口就可以发信息给它。
// b页面
parent.postMessage(
value,
""
);
// a页面
window.addEventListener("message", function( event){
if(event.origin!=='') return;
toggleFullScreen()
});
为了安全，收到信息后要检测下event.origin判断是否要收信息的窗口发过来的。
通过以上的方法，我们就可以和iframe自由通信啦。
iframe的使用方法的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于iframe框架使用方法、iframe的使用方法的信息别忘了在本站进行查找哦。