iframe>和 frame>标签属性详解

iframe>和 frame>标签属性详解

iframe>元素会创建包含另外一个文档的内联框架(即行内框架);
一、align 属性(不赞成)
       align属性规定iframe相对于周围元素的水平和垂直对齐方式,因为iframe元素是行内元素,即不会在页面上插入新行,这意味着文本和其他元素可以围绕在其周围,所以align属性可以规定iframe相对于周围元素的对齐方式;
二、frameborder属性
       frameborder属性规定是否显示iframe周围的边框,但出于实用性方面的原因,最好不用设置该属性,而使用CSS来设置边框,是否显示边框:1(yes),0(no);
123456789 <html><body> <iframe src ="/index.html" width="400" height="300" frameborder="0"><p>Your browser does not support iframes.</p></iframe> </body></html>
三、height 属性
       规定 iframe 的高度;
<html>
<body>
<iframe src ="/index.html" width="400px" height="500px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
复制代码
四、marginheight 属性
       规定 iframe 的顶部和底部的空白边距,以像素计;
<html>
<body>
<iframe src ="/example/html/demo_iframe.html" marginheight="50px"
 width="400px" height="300px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
五、marginwidth 属性
       规定 iframe 的左边和右边的空白边距,以像素计;
<html>
<body>
<iframe src ="/example/html/demo_iframe.html" marginwidth="50px"
 width="400px" height="300px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
六、name 属性
       规定 iframe 的名称,iframe 元素的 name 属性用于在 JavaScript 中引用元素,或者作为链接的目标;
<html>
<body>
<iframe src="/example/html/demo_iframe.html" name="iframe_a">
  <p>Your browser does not support iframes.</p>
</iframe>
<a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a>
</body>
</html>
七、sandbox属性
       如果被规定为空字符串(sandbox=””),sandbox 属性将会启用一系列对行内框架中内容的额外限制,sandbox 属性的值既可以是一个空字符串(应用所有的限制),也可以是空格分隔的预定义值列表(将移除特定的限制);
  • “”:应用以下所有的限制;
  • allow-same-origin:允许 iframe 内容被视为与包含文档有相同的来源;
  • allow-top-navigation:允许 iframe 内容从包含文档导航(加载)内容;
  • allow-forms:允许表单提交;
  • allow-scripts:允许脚本执行;
<!DOCTYPE html>
<html>
<body>
<iframe src="/demo/demo_iframe_sandbox.html" sandbox="">
  <p>Your browser does not support iframes.</p>
</iframe>
<p>"获得日期和时间" 按钮会在行内框架中运行一段脚本。</p>
<p>由于 sandbox 属性被设置为空字符串 (""),行内框架的内容不允许运行脚本。</p>
<p>如果向 sandbox 属性添加 "allow-scripts",则允许运行 JavaScript。</p>
<p><b>注释:</b>IE 9 以及更早的版本不支持 sandbox 属性,Opera 12 以及更早的版本也不支持该属性。</p>
</body>
</html>
八、scrolling 属性
       规定是否在 iframe 中显示滚动条,默认地,如果内容超出了 iframe,滚动条就会出现在 iframe 中;
  • auto:在需要的情况下出现滚动条(默认值);
  • yes:始终显示滚动条(即使不需要);
  • no:从不显示滚动条(即使需要);
<html>
<body>
<h3>iframe 中始终显示滚动条:</h3>
<iframe src ="/index.html" width="200" height="200" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<h3>iframe 中从不显示滚动条:</h3>
<iframe src ="/index.html" width="200" height="200" scrolling="no">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
九、seamless 属性
       属于逻辑属性,当设置该属性后,它规定了 <iframe> 看上去像是包含文档的一部分(无边框或滚动条);
<!DOCTYPE html>
<html>
<body>
<p>这是一个段落。</p>
<iframe src="/demo/demo_iframe.html" seamless></iframe>
<p><b>注释:</b>Opera、Chrome 以及 Safari 支持 seamless 属性。</p>
</body>
</html>
十、src 属性
       规定在 iframe 中显示的文档的 URL;
  • 绝对 URL:指向其他站点(比如 src=”wwhtml”);
  • 相对 URL:指向站点内的文件(比如 src=”index.html”);
<html>
<body>
<iframe src ="/index.html">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
十一、srcdoc 属性
       规定页面的 HTML 内容显示在行内框架中,该属性与 sandbox 和 seamless 属性一同使用,如果浏览器不支持 srcdoc 属性,则相应地会显示在 src 属性(若已设置)中规定的文件;
<!DOCTYPE html>
<html>
<body>
<iframe srcdoc="<p>Hello world!</p>" src="/demo/demo_iframe_srcdoc.html">
  <p>Your browser does not support iframes.</p>
</iframe>
<p><b>注释:</b>所有主流浏览器都支持 srcdoc 属性,除了 Internet Explorer。</p>
</body>
</html>
复制代码
十二、width 属性
       规定 iframe 的宽度;
<html>
<body>
 <iframe src ="/index.html" width="400px" height="300px">
  <p>Your browser does not support iframes.</p>
 </iframe>
</body>
</html>
十三、iframe的基本特性
       通常使用Iframe最基本的特性,就是能自由操作iframe和父框架的内容(DOM),但前提条件是同域,如果跨域顶多只能实现页面跳转window.location.href;
A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>
B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>
使用A时,因为同域,父页面可以对子页面进行改写,反之亦然; 使用B时,不同域,父页面没有权限改动子页面,但可以实现页面的跳转;
十四、获取iframe里的内容
       iframe.contentWindow:获取iframe的window对象; iframe.contentDocument:获取iframe的document对象; 这两个API只是DOM节点提供的方式(即getELement系列对象)
var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
console.log("window",iwindow);//获取iframe的window对象
console.log("document",idoc);  //获取iframe的document
console.log("html",idoc.documentElement);//获取iframe的html
console.log("head",idoc.head);  //获取head
console.log("body",idoc.body);  //获取body
<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
    console.log(window.frames['ifr1'].window);
    console.dir(document.getElementById("ifr1").contentWindow);
</script>
十五、在iframe中获取父级内容
       在同域下,子iframe同样也能操作父页面内容,在iframe中,可以通过在window上挂载的几个API进行获取; window.parent:获取上一级的window对象,如果还是iframe则是该iframe的window对象; window.top:获取最顶级容器的window对象,即打开页面的文档; window.self:返回自身window的引用,可以理解为window===window.self;
十六、iframe的轮询
       之前的网页可以使用iframe实现异步发送请求; ajax的长轮询是在ajax的readyState=4时再次执行原函数,这里使用iframe也是一样,异步创建iframe,然后reload,和后台协商好,看后台返回的信息放在哪,然后获取里面的信息即可,这里是直接放在body里;
var iframeCon = docuemnt.querySelector('#container'),text; //传递的信息
var iframe = document.createElement('iframe'),
    iframe.id = "frame",
    iframe.style = "display:none;",
    iframe.name="polling",
    iframe.src="target.html";
iframeCon.appendChild(iframe);
iframe.onload= function(){
      var iloc = iframe.contentWindow.location,
          idoc  = iframe.contentDocument;
      setTimeout(function(){
          text = idoc.getElementsByTagName('body')[0].textContent;
          console.log(text);
          iloc.reload(); //刷新页面,再次获取信息,并且会触发onload函数
      },2000);
    }
复制代码
十七、自适应iframe之蜜汁广告
       通常使用iframe在页面引入广告,因为广告一般是与页面内容不相关的,如果使用div在页面中嵌套,会造成网页内容的紊乱,而且这样势必需要引入额外的css和js,极大的降低了网页的安全性,因此需要使用iframe来插入广告,我们可以将iframe理解为一个沙盒,里面的内容能够被top window完全控制,而且主页的css样式是不会入侵iframe里面的样式,这些都给iframe的广告命运埋下伏笔,默认情况下,iframe是不适合做展示信息的,需要对其进行decorate;
自适应iframe
       第一步:默认情况下,iframe会自带滚动条,不会全屏,如果想自适应iframe,需要去掉滚动条;
<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>
       第二步:设置iframe的高为body的高;
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;
此外,还可以添加其他的装饰属性: 1)allowtransparency:true or false,是否允许iframe设置为透明,默认为false; 2)allowfullscreen:true or false,是否允许iframe全屏,默认为false;
// 样式可以直接写在内联样式里面,也可以在css里面定义,不过对于广告iframe来说,样式写在属性中,是best pratice;
<iframe id="google_ads_frame2" name="google_ads_frame2" width="160" height="600" frameborder="0" src="target.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
十八、iframe安全性探索
       iframe出现安全性有两个方面,一是你的网页被别人iframe;二是你iframe别人的网页;当你的网页被别人iframe时,可能容易被钓鱼网站利用,为了防止页面被一些不法分子利用,我们需要做好安全性措施;
防嵌套网页
       比如clickhacking就是使用iframe来拦截click事件,因为iframe享受着click的最优先权,当有人在伪造的主页中进行点击的话,如果点在iframe上,则会默认是在操作iframe的页面,所以钓鱼网站就是使用这个技术,通过诱导用户进行点击,比如设计一个“妹妹寂寞了”等之类的网页,诱导用户点击,但实际结果,看到的不是“妹妹”,而是被恶意微博吸粉,所以为了防止网站被钓鱼,可以使用window.top来防止网页被iframe;
//iframe2.html
// 限定你的网页不能嵌套在任意网页内
if(window != window.top){
    window.top.location.href = correctURL;
}
这段代码的主要用途是限定你的网页不能嵌套在任意网页内。如果你想引用同域的框架的话,可以判断域名。
// 如果想引用同域的框架的话,可以判断域名,如果不同域的话,上述内容会报错
if (top.location.host != window.location.host) {
  top.location.href = window.location.href;
}
所以,这里可以使用try…catch…进行错误捕获。如果发生错误,则说明不同域,表示你的页面被盗用了。可能有些浏览器这样写是不会报错,所以需要降级处理。 这时候再进行跳转即可.
// 使用try...catch...进行错误捕获,如果发生错误,则说明不同域,表示页面被盗用了
try{
  top.location.hostname; //检测是否出错
  //如果没有出错,则降级处理
  if (top.location.hostname != window.location.hostname) {
    top.location.href =window.location.href;
  }
} catch(e){
  top.location.href = window.location.href;
}
X-Frame-Options
       X-Frame-Options是一个相应头,主要是描述服务器的网页资源的iframe权限,其实就是将前端js对iframe的把控权交给服务器来进行处理:
  • X-Frame-Options: DENY:拒绝任何iframe的嵌套请求;
  • X-Frame-Options: SAMEORIGIN:只允许同源请求,例如网页为 foo.com/123.php,則 foo.com 底下的所有网页可以嵌入此网页,但是 foo.com 以外的网页不能嵌入;
  • X-Frame-Options: ALLOW-FROM http://2.com:只允许指定网页的iframe请求,不过兼容性较差,Chrome不支持;
//js
if(window != window.top){
    window.top.location.href = window.location.href;
} //等价于
X-Frame-Options: DENY //js
if (top.location.hostname != window.location.hostname) {
    top.location.href =window.location.href;
} //等价于
X-Frame-Options: SAMEORIGIN</pre>
       X-Frame-Options属性是对页面的iframe进行的一个主要限制,不过涉及iframe的header可不止这一个,另外还有一个Content Security Policy,他同样也可以对iframe进行限制,而且他应该是未来网页安全防护的主流;
CSP之页面防护
       和X-Frames-Options一样,都需要在服务端设置好相关的Header,CSP能够极大的防止页面被XSS攻击,而且可以制定js,css,img等相关资源的origin,防止被恶意注入,不过兼容性不好; 使用主要是在后端服务器上配置,在前端可以观察Response Header里是否有这样一个Header:
Content-Security-Policy: default-src 'self'
       通常我们可以在CSP后配置各种指定资源路径,有
  • default-src,
  • script-src,
  • style-src,
  • img-src,
  • connect-src,
  • font-src,
  • object-src,
  • media-src,
  • sandbox,
  • child-src,
  • … 如果未指定的话,会默认使用default-src规定的加载策略,默认配置就是同域: default-src “self”;这里还和iframe有一点瓜葛的就是child-src 和 sandbox,child-src就是用来指定iframe的有效加载路径,其实和X-Frame-Options中配置allow-origin是一个道理,不过allow-origin没有得到厂商的支持,而sandbox其实就和iframe的sandbox属性是一样的,他可以规定来源能够带有什么权限;
Content-Security-Policy: child-src 'self' http://example.com; sandbox allow-forms allow-same-origin</pre>
       此时iframe的src就只能加载同域和example.com页面,最后再补充一点:使用CSP能够很好的防止XSS攻击,原理就是CSP会默认escape掉内联样式和脚本以及eval执行,可以使用srcipt-src进行降低限制;
Content-Security-Policy: script-src 'unsafe-inline'
       当然我们面临的安全总量还有一个,就是当iframe别人的页面时,我们需要对其进行安全设限,虽然跨域时iframe的安全性会大很多,但是互联网没有安全的地方,H5提供的新属性sandbox可以很好的解决这个问题;
sandbox
       sandbox就是用来给指定的iframe设置一个沙盒模型来限制iframe的更多权限,sandbox是H5的一个新属性;
// 这样就可以对iframe页面进行一系列的限制
<iframe sandbox src="..."></iframe>
可以进行如下操作:
  • script脚本不能执行;
  • 不能发送ajax请求;
  • 不能使用本地存储,即localStorage,cookie等;
  • 不能创建新的弹窗和window;
  • 不能发送表单;
  • 不能加载额外插件比如flash等;
常用的配置项有:
配置 效果
allow-forms 允许进行提交表单
allow-scripts 运行执行脚本
allow-same-origin 允许同域请求,比如ajax,storage
allow-top-navigation 允许iframe能够主导window.top进行页面跳转
allow-popups 允许iframe中弹出新窗口,比如,window.open,target=”_blank”
allow-pointer-lock 在iframe中可以锁定鼠标,主要和鼠标锁定有关
// 这样可以保证js脚本的执行,但是禁止iframe里的javascript执行top.location = self.location
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="..."></iframe>
resolve iframe跨域
       iframe就是一个隔离沙盒,相当于我们在一个页面内可以操控很多个标签页一样,如果踩坑的童鞋应该知道,iframe也可以解决跨域; iframe可以解决二级域名跨域的情况,即主域相同而子域不同的情况,在两个不同子域下(某一方使用iframe嵌套在另一方):
// 两个文件中分别加上document.domain = ‘foo.com’,指定相同的主域
// 然后,两个文档就可以进行交互了
http: //www.foo.com/a.html
http: //script.foo.com/b.html
//b.html是以iframe的形式嵌套在a.html中
//www.foo.com上的a.html
document.domain = 'foo.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.foo.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
//script.foo.com上的b.html
document.domain = 'foo.com';
       默认情况下document.domain 是指window.location.hostname, 你可以手动更改,但是最多只能设置为主域名,通常,主域名就是指不带www的hostname, 比如: foo.com , baidu.com , 如果带上www或者其他的前缀,就是二级域名或者多级域名,通过上述设置,相同的domain之后,就可以进行同域的相关操作;
H5的CDM跨域与iframe
       如果设置的iframe域名和top window域名完全不同,则可以使用CDM(cross document messaging)进行跨域消息的传递; 发送消息:使用postmessage方法; 接收消息:监听message事件;
postmessage
       该方法挂载到window对象上,即使用window.postmessage()调用,该方法接受两个参数:postMessage(message, targetOrigin)
  • message:就是传递给iframe的内容,通常是string,如果想传object对象也可以,但如果有条件,可以使用JSON.stringify进行转化,这样保证不会出bug;
  • targetOrigin:接受你传递消息的域名,可以设置绝对路径,也可以设置”*”或者”/”, *表示任意域名都行,”/”表示只能传递给同域域名;
<iframe src="http://tuhao.com" name="sendMessage"></iframe>
//当前脚本
let ifr = window.frames['sendMessage'];
   //使用iframe的window向iframe发送message。
ifr.postmessage('give u a message', "http://tuhao.com");
//tuhao.com的脚本
window.addEventListener('message', receiver, false);
function receiver(e) {
    if (e.origin == 'http://tuhao.com') {
        if (e.data == 'give u a message') {
            e.source.postMessage('received', e.origin);  //向原网页返回信息
        } else {
            alert(e.data);
        }
    }
}
       当targetOrigin接收到message消息之后,,会触发message事件,message提供的event对象上有3个重要的属性,data,origin,source:
data:postMessage传递进来的值;
origin:发送消息的文档所在的域;
source:发送消息文档的window对象的代理,如果是来自同一个域,则该对象就是window,可以使用其所有方法,如果是不同的域,则window只能调用postMessage()方法返回信息
十九、<frameset>和<iframe>的区别
  • iframe 和 frameset 都用于html页面的框架布局;
  • <iframe>:iframe 是个内联框架,是在页面里生成个内部框架; <frameset >:frameset 定义一个框架集,包含多个子框架,每个框架都有独立的文档;
<html>
<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>
</html>
frame不能脱离frameSet单独使用,iframe可以;
frame不能放在body中:
// 如下可以正常显示
<!--<body>-->
<frameset rows="50%,*">
   <frame   name="frame1"   src="test1.htm"/>
   <frame   name="frame2"   src="test2.htm"/>
</frameset>
<!--<body>-->
// 如下不能正常显示:
<body>
<frameset rows="50%,*">
   <frame   name="frame1"   src="test1.htm"/>
   <frame   name="frame2"   src="test2.htm"/>
</frameset>
<body>
  • 嵌套在frameSet中的iframe必须放在body中:
// 如下可以正常显示:
  <body>
    <frameset>
      <iframe   name="frame1"   src="test1.htm"/>
      <iframe   name="frame2"   src="test2.htm"/>
    </frameset>
  </body>
// 如下不能正常显示:
  <!--<body>-->
    <frameset>
      <iframe   name="frame1"   src="test1.htm"/>
      <iframe   name="frame2"   src="test2.htm"/>
    </frameset>
  <!--</body>-->
  • 不嵌套在frameSet中的iframe可以随意使用;
// 如下均可以正常显示:
<body>
   <iframe   name="frame1"   src="test1.htm"/>
   <iframe   name="frame2"   src="test2.htm"/>
</body>
<!--<body>-->
   <iframe   name="frame1"   src="test1.htm"/>
   <iframe   name="frame2"   src="test2.htm"/>
<!--</body>-->
  • frame的高度只能通过frameSet控制,iframe可以自己控制,不能通过frameSet控制,如:
<!--<body>-->
<frameset rows="50%,*">
   <frame name="frame1"   src="test1.htm"/>
   <frame name="frame2"   src="test2.htm"/>
</frameset>
<!--</body>-->
<body>
<frameset>
   <iframe height="30%"  name="frame1"   src="test1.htm"/>
   <iframe height="100"  name="frame2"   src="test2.htm"/>
</frameset>
</body>
  • 如果在同一个页面使用了两个以上的iframe: IE中可以正常显示,在firefox中只能显示出第一个,使用两个以上的frame在IE和firefox中均可正常显示;
  • frame与iframe两者可以实现的功能基本相同,不过Iframe比frame具有更多的灵活性, frame是整个页面的框架,iframe是内嵌的网页元素,也可以说是内嵌的框架 : iframe标记又叫浮动帧标记,可以用它将一个HTML文档嵌入在一个HTML中显示,它和frame标记的最大区别是在网页中嵌入的<iframe></iframe>所包含的内容与整个页面是一个整体,而<frame></frame>所包含的内容是一个独立的个体,是可以独立显示的,另外,应用iframe还可以在同一个页面中多次显示同一内容,而不必重复这段内容的代码;
  • iframe 可以放到表格里面,frame 则不行;
<table>
 <tr>
   <td><iframe id="" src=""></iframe></td><td></td>
 </tr>
</table>
  • frame必须在frameset里,而frameset不能与body元素共存,也就说有frameset元素的文档只能是一个框架集,不能有别的东西;
  • iframe放在网页的什么地方都行,但是frame只能放到上下左右四个方向;
  • iframe是活动帧,而frame是非活动帧:
// iframe使用方法如下
  <iframe scr="sourcefile" frameborder=0 width="width" height="height"></iframe>
  • iframe用起来更灵活,不需要frame那么多讲究,而且放的位置也可以自己设, iframe是内嵌的,不过也有不好的地方,就是位置在不同的浏览器和分辨率下有可能不同,有时会把本来好好的页面搞得变形;
  • iframe可以加在网页中任何一个地方,而frame通常做框架页,iframe是一个网页中的子框架,两网页间是父子关系,frame是框架,由多个并列的网页构成;
  • iframe是浮动的,就像是浮动面板,而frame是固定的,只能四个方向上的;
  • <iframe>是被嵌入在网页的元素,而<frame>用于组成一个页面的多个框架,iframe更利于版面的设计,frame一条直一条竖的不美观,frame的那一条线也可以去掉的呦!只不过,iframe更方便对其进行数据的交换吧! iframe可以放置到你想放的任意位置,控制起来比frame方便;
  • iframe是内部帧,可以嵌在一个页面里面,设置内部帧的属性可以使得整体看上去像是一个完整的页面,而不是由多个页面组成,frame有frame的好处,比如更多网站,上面放广告条,左边放菜单,右边放内容,这样上边和左边的内容都可不动,只刷新右边页面的内容,选择iframe还是frame完全看自己的需求;
  • 用iframe比用frame少一个文件(frameSet),但支持frame的浏览器比较多;
  • iframe可以放在表格里,然后ifame设置成width=100%,height=100%,这样就可以只需修改表格的宽度和高度,有利于排版 ;
  • 其实frame是一个控件,使用方法和Panle相同;
  • frame是把网页分成多个页面的页面。它要有一个框架集页面frameset,iframe是一个浮动的框架,就是在你的页面里再加上一个页面;
  • <frame>用来把页面横着或竖着切开,<iframe>用来在页面中插入一个矩形的小窗口;
  • frame一般用来设置页面布局,将整个页面分成规则的几块,每一块里面包含一个新页面,iframe用来在页面的任何地方插入一个新的页面,因此,frame用来控制页面格式,比如一本书,左边是章节目录,右边是正文,正文很长,看的时候要拖动,但又不想目录也被拖动得看不到了,因此最好将页面用frame分成规则的2页,一左一右;而iframe则更灵活,不要求将整个页面划分,可以在页面任何地方用iframe嵌入新的页面;
  • <frame>用于全页面; <iframe>只用于局部;
40 Views
分享你的喜爱
默认图片
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论