Iframe跨窗口通信

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

Iframe跨窗口通信

marh   2022-09-28 我要评论

同源

同源策略会限制 窗口(window) 和 frame 之间的通信,因此首先要知道同源策略。

同源策略目的是保护用户信息免遭信息盗窃:加入小王有两个打开的页面:一个是 shop.com,一个是 email.com。小王不希望 shop.com 的脚本可以读取 mail 的邮件,这时同源策略就起作用了。

如果两个 URL 具有相同的协议,域,和端口,则称它们是同源的。

以下几个URL是同源的:

以下是不同源的:

  • https://site.com
  • http://bbs.site.com
  • site.com:8080
  • http://site.org

同源策略规定:

  • 如果我们有对另一个窗口的引用(window.open || iframe),并且该窗口是同源的,那么我们就具有对该窗口的全部访问权限。见代码:2-1 、2-2
  • 如果不是同源的,我们就不能访问窗口中的内容:变量,文档,任何东西。唯一例外是location:我们可以修改它,使用它进行重定向。但是我们无法读取 location 。因此,我们无法看到用户当前所处的位置,也就不会泄露任何信息。

iframe

iframe 标签承载了一个单独的嵌入的窗口,它有自己的 documentwindow

iframe.contentWindow 来获取 中的 window

iframe.contentDocument 来获取 中的 document , 是 iframe.contentWindow.document 的简写。

当我们访问嵌入的窗口中的东西时,浏览器会检查 iframe 是否具有相同的源。如果不是,则会拒绝访问(对 location 进行写入是一个例外,它是会被允许的)。

代码 2-1 : (在 同源 情况下)

 <!-- 1.html 内容 -->
 <!-- http://127.0.0.1:8000/1.html -->
 <body>
     我是 1.html, 下面嵌套 2.html
     <iframe src="http://127.0.0.1:8000/2.html" ></iframe>
     <script>
         function hello () { console.log('this is 1.html') }
         var iframe = document.getElementsByTagName('iframe')[0];
         console.log('contentWindow 
      

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们