小说网站怎么做不违法,论坛源码哪个好,绍兴seo整站优化,seo优化公司如何做HTML5中的iframe
浏览上下文是浏览器展示文档的环境#xff0c;通常是一个tab标签页#xff0c;一个窗体或者是浏览器页面的一部分。每个浏览上下文都有一个活动文档的源和一个记录所有展示文档的有序历史。浏览上下文的通讯被严格限制#xff0c;只有两个同源的浏览器上下…HTML5中的iframe
浏览上下文是浏览器展示文档的环境通常是一个tab标签页一个窗体或者是浏览器页面的一部分。每个浏览上下文都有一个活动文档的源和一个记录所有展示文档的有序历史。浏览上下文的通讯被严格限制只有两个同源的浏览器上下文才能打开和使用通讯接口。 iframe表示嵌套的浏览上下文能够将一个html页面嵌入到当前页面中 每个嵌入的浏览上下文都有自己的会话历史记录和dom树包含 嵌入内容的成为父级浏览上下文顶级浏览上下文通常是由window对象表示的浏览器窗口
iframe应用
在iframe标签中放入某个网站的地址就可以在网页中嵌入该网页但是有的网站会拒绝连接请求。这种情况下会涉及到跨域问题
同源策略
如果两个url具有相同的协议域和端口则称他们是同源的。 如果是同源的就具有对该窗口的全部访问权限。如果不是同源的就不能访问窗口中的内容变量文档除了location 可以修改这里面的值使用它进行重定向但是无法读取location。 同源策略会限制窗口和frame之间的通信。
iframe跨域
iframe标签有自己的document和windowiframe.contentWindow来获取windowiframe.contentDocument来获取document是iframe.contentWindow.document的简写。当访问嵌入的iframe窗口浏览器会检查iframe中是否具有相同的源。如果不是则会拒绝访问。对location进行写入是一个例外这个是被允许的。
iframe.onload
在创建 iframe 后iframe 会立即就拥有了一个文档。但是该文档不同于加载到其中的文档因此如果我们要立即对文档进行操作就可能出问题因为那是错误的文档。正确的文档在 iframe.onload 触发时肯定就位了。但是只有在整个 iframe 和它所有资源都加载完成时iframe.onload 才会触发。 iframe标签上的iframe.onload和在嵌入的window对象上的iframe.contentWindow.onload上基本相同当嵌入的所有资源都完全加载的时候出发但是用嵌入对象的api无法访问不同源的iframe。
window.frames
获取iframe的window对象的方式是从命令集合window.frames中获取。
通过索引获取 window.frames[0]。 文档中的第一个iframe的window对象通过名称获取: window.frames.iframeName – 获取name‘iframeName’ – 获取nameiframeName’的iframe的window对象。
sandbox
sandbox特性允许在iframe中禁止某些特定行为防止执行不被信任的代码将iframe视为非同源的或者应用其他限制来实现iframe的沙盒化。 可以通过sandbox“”将放宽的限制写入来达到放宽的目的。
iframe通信
postMessage
想要发送消息的窗口需要调用接受窗口的postmessage方法
data:要发送的数据targetOrgin: 指定目标窗口的源以便只有来自给定窗口的源的窗口才能获得到该消息。
onmessage
为了接受消息目标窗口在message事件上有一个处理程序当postmessage被调用出发该事件的时候。
data: 从postmessage传递过来的数据origin发送方的源source对发送方窗口的引用可以调用source.postmessage的方法 要为message事件分配事件处理程序应该使用addEventListener方法
跨域问题的解决
domian修改文档域
如果两个页面只是子域不同可以设置相同的document.domain来绕过同源策略的限制这种方法只使用于协议和端口都相同的情况。
postmessage
window.postMessage方法允许来自不同源的脚本进行安全通信。你可以通过这个方法在iframe和其父页面或任何窗口之间发送消息
实例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1这个是一个父页面/h1iframe ida src./b.html frameborder1 height600 width600/iframep父页面/pscriptwindow.onload function() {var iframe document.getElementById(a)iframe.onload function() {console.log(iframe加载已经完成)iframe.contentWindow.postMessage(hello from a,b.html)}}window.onmessagefunction(event) {if(event.origin ! http://domain.com) {return}console.log(从子页面收到的消息, event.data)}/script
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh2子页面/h2piframe传入父页面中/pscriptwindow.onmessage function(event) {if(event.origin ! http://a.com) {return}console.log(从父组件收到的消息, event.onload)event.source.postMessage(hello back from child,event.origin)}/script
/body
/html
