做电脑系统的网站好,农业企业网站建设流程,建设工程招聘信息网站,制作简易网站模板简单使用 我们通常使用iframe最基本的特性#xff0c;就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转 iframe src./iframeA.html/iframe 同域
or
iframe srchttps://cn.bing.com/就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转 iframe src./iframeA.html/iframe 同域
or
iframe srchttps://cn.bing.com//iframe 跨域iframeA.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body styleheight:500pxdiv idiframeAID我是iframeA/divinput typetext iddate value2022-10-24/
/body
/htmliframe常用属性
name:框架的名称window.frames[name]时专用的属性。
src内框架的地址可以使页面地址也可以是图片的地址。
width:框架作为一个普通元素的宽度建议使用css设置。
height:框架作为一个普通元素的高度建议在使用css设置。
scrolling:框架的是否滚动。yes,no,auto。
frameborder:是否显示边框1(yes),0(no)
srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
sandbox: 对iframe进行一些列限制IE10支持获取iframe里的内容 主要的两个API就是contentWindow,和contentDocument,这两个API只是DOM节点提供的方式(即getELement系列对象) // iframe.contentWindow, 获取iframe的window对象
// iframe.contentDocument, 获取iframe的document对象
scriptwindow.onload function(){let obj document.getElementById(iframe1);// 获取iframe的window对象let objWindow obj.contentWindowconsole.log(objWindow); console.log(objWindow.document); // 获取iframe的window对象的documentconsole.log(objWindow.document.documentElement); // 获取htmlconsole.log(objWindow.document.head); // 获取headconsole.log(objWindow.document.body); // 获取body// 获取iframe的documentlet objContentDocument obj.contentDocumentconsole.log(objContentDocument); // 结合Name属性通过window提供的frames获取.console.log(window.frames[iframe1].window);// 修改子页面样式let obj document.getElementById(iframe1);let box obj.contentWindow.document.getElementById(iframeAID)box.style.width 500px;box.style.height 100px;box.style[backgroundColor] red;// // 获取子页面输入框值console.log(window.frames[iframe1].document.getElementById(date).value);
}
/script在iframe中获取父级内容 同理在同域下父页面可以获取子iframe的内容那么子iframe同样也能操作父页面内容。 在iframe中可以通过在window上挂载的几个API进行获取. window.parent 获取上一级的window对象如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象即就是你打开页面的文档
window.self 返回自身window的引用。可以理解 windowwindow.selfscript// 方法一 父页面可控可以使用window.onload function(){console.log(window.frames.name);console.log(parent.window.frames.document.querySelectorAll(iframe) );let arr Array.from(parent.window.frames.document.querySelectorAll(iframe))arr.forEach(item {if(window.frames.name item.name) {console.log(item.id);console.log(item.width);console.log(item.height);console.log(item.src);}})}// 方法二 建议使用window.onload function(){parent.window.frames.document.querySelectorAll(iframe).forEach(item {if(window.frames.location.href item.src){console.log(item.id, 根据地址判断-- 我是iframeA);}})}
/script动态添加 iframe
scriptwindow.onload function(){let iframeCon document.querySelector(#container)let text; //传递的信息let iframe document.createElement(iframe)iframe.id frameiframe.style display:block;iframe.namepollingiframe.src./iframeB.htmliframeCon.appendChild(iframe);}
/scriptiframe样式 默认情况下iframe会自带滚动条不会全屏 去掉滚动条
iframe nameiframe1 idiframe1 src./iframeA.html scrollingno/iframe设置 iframe的高为body的高
let iframe document.getElementById(iframe1);
let objWindow iframe.contentWindow;
let objDoc objWindow.document;
iframe.height objDoc.body.offsetHeight;是否允许iframe设置为透明allowtransparency 默认为false
iframe nameiframe1 idiframe1 src./iframeA.html allowtransparencytrue/iframe是否允许iframe全屏allowfullscreen 默认为false
iframe nameiframe1 idiframe1 src./iframeA.html allowfullscreentrue/iframeiframe安全性探索 iframe出现安全性有两个方面一个是你的网页被别人iframe,一个是你iframe别人的网页 防嵌套网页
// 使用window.top来防止自己的网页被iframe.这段代码的主要用途是限定自己的网页不能嵌套在任意网页内
if(window ! window.top){window.top.location.href correctURL;
}
// 如果你想引用同域的框架的话可以判断域名
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;
}在服务器上对使用iframe的权限进行设置 X-Frame-Options
X-Frame-Options是一个相应头主要是描述服务器的网页资源的iframe权限。目前的支持度是IE8有3个选项:
DENY 当前页面不能被嵌套iframe里即便是在相同域名的页面中嵌套也不允许,也不允许网页中有嵌套iframe
SAMEORIGIN iframe页面的地址只能为同源域名下的页面
ALLOW-FROM 可以在指定的origin url的iframe中加载X-Frame-Options: DENY 拒绝任何iframe的嵌套请求
X-Frame-Options: SAMEORIGIN 只允许同源请求例如网页为 foo.com/123.php則 foo.com 底下的所有网页可以嵌入此网页但是 foo.com 以外的网页不能嵌入
X-Frame-Options: ALLOW-FROM http://s3131212.com 只允许指定网页的iframe请求不过兼容性较差Chrome不支持X-Frame-Options其实就是将前端js对iframe的把控交给服务器来进行处理。 //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
