iframe使用详解(iframe框架页面实例)
大家好，今天给各位分享iframe使用详解的一些知识，其中也会对iframe框架页面实例进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
求:<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自由通信啦。
iiframe可以旋转的步骤详解
要将iframe旋转，可以使用CSS3的transform属性来实现。以下是详细的步骤：
确认iframe元素在页面中的位置：首先，你需要确保知道iframe元素在页面中的具体位置。这通常涉及到HTML的布局结构，以及iframe元素的ID或类名。通过这些信息，你可以准确地选中要旋转的iframe元素。
使用CSS3的transform属性：CSS3的transform属性是一个强大的工具，它允许你对元素进行各种变换，包括旋转、缩放、移动等。在这个场景中，我们将使用transform属性来旋转iframe。
应用rotate(90deg)值到transform属性：你可以通过添加一个CSS规则来旋转iframe。例如，如果iframe的ID是“myIframe”，那么CSS规则可以这样写：#myIframe{ transform: rotate(90deg); transform-origin: top left;/*可以根据需要调整旋转的基点*/}。在这个例子中，#myIframe是iframe元素的ID选择器，你可以根据实际情况将其替换为对应的类名或标签选择器。rotate(90deg)表示将iframe旋转90度，而transform-origin属性则用来设置旋转的基点。
测试旋转效果：在应用了上述CSS规则后，你需要检查iframe的旋转效果，并确保它不会破坏页面的其他布局或功能。如果发现问题，你可能需要调整CSS规则或HTML布局。
调整iframe的尺寸或位置（可选）：旋转后，iframe的尺寸和位置可能需要调整以适应新的显示效果。例如，你可能需要调整iframe的高度和宽度，或者改变其在页面上的位置，以确保旋转后的iframe能够正确地显示内容并且不影响页面的整体布局。
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！