html5中的iframe

时间：2024-07-06 11:40:24

HTML5中的iframe

浏览上下文是浏览器展示文档的环境，通常是一个tab标签页，一个窗体或者是浏览器页面的一部分。每个浏览上下文都有一个活动文档的源和一个记录所有展示文档的有序历史。浏览上下文的通讯被严格限制，只有两个同源的浏览器上下文，才能打开和使用通讯接口。
<iframe>表示嵌套的浏览上下文，能够将一个html页面嵌入到当前页面中
每个嵌入的浏览上下文，都有自己的会话历史记录和dom树，包含 嵌入内容的成为父级浏览上下文，*浏览上下文通常是由window对象表示的浏览器窗口

iframe应用

在iframe标签中放入某个网站的地址，就可以在网页中嵌入该网页，但是有的网站会拒绝连接请求。这种情况下会涉及到跨域问题

同源策略

如果两个url具有相同的协议，域和端口，则称他们是同源的。
如果是同源的，就具有对该窗口的全部访问权限。如果不是同源的，就不能访问窗口中的内容，变量，文档，除了location： 可以修改这里面的值，使用它进行重定向，但是无法读取location。
同源策略会限制窗口和frame之间的通信。

iframe跨域

iframe标签有自己的document和window，iframe.contentWindow来获取window，iframe.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’ – 获取name='iframeName’的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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这个是一个父页面</h1>
    <iframe id="a" src="./b.html" frameborder="1" height="600" width="600"></iframe>
    <p>父页面</p>
    <script>
        window.onload = function() {
            var iframe = document.getElementById('a')
            iframe.onload = function() {
                console.log("iframe加载已经完成")
                iframe.contentWindow.postMessage('hello from a','b.html')
            }
        }
        window.onmessage=function(event) {
            if(event.origin !== 'http://domain.com') {
                return
            }
            console.log('从子页面收到的消息', event.data)
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>子页面</h2>
    <p>iframe传入父页面中</p>
    <script>
        window.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>

相关文章