首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将包含窗口的函数传递给子iframe时,window的值引用父窗口,而不是子窗口

当将包含窗口的函数传递给子iframe时,window的值引用的是父窗口,而不是子窗口。这是因为在JavaScript中,window对象表示当前浏览器窗口或框架的全局对象。当在父窗口中定义一个函数,并将其传递给子iframe时,子iframe中的window对象实际上是指向父窗口的window对象。

这种行为可以通过以下步骤来解释:

  1. 在父窗口中定义一个函数,例如:
代码语言:txt
复制
function myFunction() {
  console.log("Hello from parent window!");
}
  1. 在父窗口中获取子iframe元素,并将函数作为参数传递给子iframe,例如:
代码语言:txt
复制
var iframe = document.getElementById("myIframe");
iframe.contentWindow.myFunction = myFunction;
  1. 在子窗口中调用该函数,例如:
代码语言:txt
复制
window.myFunction(); // 输出 "Hello from parent window!"

在这个过程中,子iframe中的window对象实际上是指向父窗口的window对象,因此可以通过window对象访问父窗口中定义的函数。

这种行为在某些情况下可能会带来一些问题,特别是在涉及跨域的情况下。为了避免潜在的安全问题,建议在跨域情况下使用其他方法来进行通信,例如使用postMessage API进行跨窗口通信。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云数据库 MySQL 版(CMYSQL):https://cloud.tencent.com/product/cmysql
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 移动开发(移动推送、移动分析):https://cloud.tencent.com/product/mobile
  • 区块链(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙:https://cloud.tencent.com/solution/virtual-universe
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iframe怎么参数传递给vue 组件

页面的iframe中想将参数传递给Vue组件,可以使用postMessage()方法数据发送给窗口组件可以通过监听message事件来接收并处理这些数据。...参数从子页面的iframe递给Vue组件: 在页面的iframe中: // 发送消息给窗口 const data = { imgUrl: '......,通过在mounted()钩子中监听message事件,可以获取页面iframe发送消息。...iframe接收vue界面iframe中,使用window.addEventListener监听message事件,然后在事件处理程序中获取传递数据: <!...iframe中使用window.addEventListener监听message事件,并在事件处理程序中获取传递数据 这里需要注意一下,使用'*'作为目标窗口origin存在安全风险。

1.3K20
  • JS之浏览器对象BOM

    对象 Window 对象表示浏览器中打开窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外 window...对象 window.frames 返回窗口中所有命名框架 parent是窗口(如果窗口是顶级窗口,那么parent==self==top) top是最顶级窗口(有的窗口中套了好几层frameset...或者iframe) self是当前窗口(等价window) opener是用open方法打开当前窗口那个窗口 ①:父子窗体之间通讯 在页面内嵌入一个iframe,在iframe中提供一个输入项,输入后...,在iframe外面窗口中显示内容 显示结果如上图所示,实现思路如下: 窗体:2.html <meta http-equiv="Content-Type" content="text/html...(){ openNew = <em>window</em>.open("http://www.itcast.cn"); } //关闭时候需要注意关闭是打开网页,不是本身 functioncloseWindow()

    2.9K90

    浏览器同源策略及规避方式

    典型例子是iframe窗口window.open方法打开窗口,它们与窗口无法通信。...上面命令中,窗口想获取窗口DOM,因为跨源导致报错。反之亦然,窗口获取主窗口DOM也会报错。...窗口先打开一个窗口,载入一个不同源网页,该网页信息写入window.name属性:window.name = data。 接着,窗口跳回一个与主窗口同域网址。...通过postMessage来传输数据以后,极大方便了数据传输,窗口接收到信息以后可以信息存储到cookie或者是localStorage中,窗口也可以将自己cookie或localStorage...作为参数JSON数据被视为JavaScript对象,不是字符串,因此避免了使用JSON.parse步骤。

    1.5K30

    窗口创建问题 | Electron 安全

    窗口禁用 Javascript,打开 window 中将被始终禁用 非标准功能 (不由 Chromium 或 Electron 提供) 给定 features 递给注册 webContents...c窗口,即其父窗口,无法执行 Node.js 0x05 window.open 上下文情况 窗口调用 window.open 创建窗口时会返回一个指向新窗口对象引用窗口可以通过这个引用直接访问窗口上下文...同源情况下,窗口获取窗口上下文测试 同源情况下访问是双向,与之前 iframe 、object 之类没有区别 非同源情况下,按照正常来说,窗口访问窗口应该还是一样 结果并不是我们想那样...,虽然有返回对象,但是获取不到窗口上下文 我们可以直接在窗口上打开开发者工具,进入控制台,输出 window.opener看看是否存在内容 存在 window.opener 但是获取不到窗口上下文...,如果此时,在窗口使用 window.opener 对象 open 方法再打开一个与窗口同源窗口,并且获取新窗口对象,用这个对象与窗口进行通信,会不会就可以获取到窗口上下文了呢?

    49010

    【Vue】基于Vue封装无需页面声明弹出层

    ,所以就封装了一个dialog以js方式引用进页面,直接调用方法动态Modal添加到页面,进行各个页面的逻辑分离。...,"%"); 3.打开一个html页面并制定回调函数 OpenDialog("444", "有回调函数参", "newpage1.html", "600", "1200", AfterCloseWithReturn...,callback:关闭打开页面后级页面调用回调函数,params:级页面给打开页面传递参数,screenunit:打开页面宽高单位 注:OpenDialog方法是在本级页面打开窗口,该组件同时提供在顶级窗口打开全局页面...,为OpenTopDialog,参数完全一致 4.页面获取级页面传递参数 var params = GetParams(); 5.关闭页面 CloseDialog("page2回111111...,普通打开页面没问题,但是一旦和打开顶级页面混用,就会出现问题,这里先说下window.postmessage一些坑 一般逻辑为,我打开一个二级页面dialog,我为级页面注册一个监听,页面关闭后向级页面发送

    26230

    layui弹窗间(layui弹出层)(窗口)

    主要有两部分 1、从主窗口到弹出层 2、从弹出层到主窗口 3、通过session互传 4、通过调用窗口函数从而获取到窗口(相反也是可以) 1、从主窗口到弹出层 首先js...changefileone函数按钮绑定事件,按钮点击后调用这个函数然后弹出弹出层,加载changefile.html界面 然后success提前加载changefileform数据(从主窗口到弹出层...预先加载,从父窗口传到 窗口 console.log(obj.data.editAble); let body = layer.getChildFrame...这是将在窗口中获取窗口form标签里所有,并根据name名和形成键值对json对象 //console.log(layero); layer.alert...'); 删除session中保存指定 sessionStorage.removeItem('roleid'); 删除全部 sessionStorage.clear(); 4、通过调用窗口函数从而获取到窗口

    6.9K20

    实现iframe窗体与窗体通信

    0.背景介绍 (1)需要在当前前端项目中,使用iframe嵌套别的站点页面。 (2)当窗体触发了一个事件后,要给窗体一个跳转地址url。...(function(msg){ alert("收到消息: " + msg); }); (4) 窗体想给窗体发信息,要添加消息对象,明确告知当前窗体,要发送消息窗体window引用与messenger...对象名字: // 窗口中 - 添加消息对象, 明确告诉窗口iframewindow引用与名字 messenger.addTarget(iframe1.contentWindow, 'iframe1...,第二个参数为项目名称 var messenger = new Messenger('iframe1', 'monitor'); //添加消息对象, 明确告诉窗口iframewindow...然后在触发onclick事件,向窗口传递消息。发消息,要指定接收消息窗体messenger名字,以及传递消息。

    9.8K771

    web messaging与Woker分类:漫谈postMessage跨线程跨页面通信

    否则,您信任只发送受信任邮件网站中安全漏洞可能会在您网站中打开跨网站脚本漏洞。 使用postMessage数据发送到其他窗口,始终指定精确目标origin,不是*。...这就是所谓subworker(还是Woker),它们必须托管在同源页面内。而且,subworker 解析 URI 时会相对于 worker 地址不是自身页面的地址。...,当message 事件发生,该函数被调用。...需要注意是,这种通信是拷贝关系,即是不是址,Worker 对通信内容修改,不会影响到主线程。...source 原始文件窗口引用。更确切地说,它是一个WindowProxy对象。 ports 一个数组,包含任何MessagePort对象发送消息。

    2.2K30

    浏览器同源政策及其规避方法

    三、iframe 如果两个网页不同源,就无法拿到对方DOM。典型例子是iframe窗口window.open方法打开窗口,它们与窗口无法通信。...比如,窗口运行下面的命令,如果iframe窗口不是同源,就会报错。...这个属性最大特点是,无论是否同源,只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它。 窗口先打开一个窗口,载入一个不同源网页,该网页信息写入window.name属性。...event.source:发送消息窗口 event.origin: 消息发向网址 event.data: 消息内容 下面的例子是,窗口通过event.source属性引用窗口,然后发送消息。...作为参数JSON数据被视为JavaScript对象,不是字符串,因此避免了使用JSON.parse步骤。

    942110

    nodeIntegrationInSubFrames | Electron 安全

    ,点击文章,会出现一个新窗口来显示文章内容,不是在原本窗口呢,这样原本窗口可以继续聊天等 https://www.electronjs.org/zh/docs/latest/api/browser-window...在之前一些版本中,似乎窗口会继承窗口一些配置,但后来主要是为了生命周期等,简单来说,我把窗口关了,窗口也会被关闭或其他设置 该参数要在窗口初始化是配置,不是窗口 0x03 测试 iframe...nodeIntegrationInSubFrames: true 窗口是否能够读取窗口 Preload 中内容 获取失败,看起来官方文档中描述 child window不是官方文档其他部分中...://www.electronjs.org/docs/latest/api/browser-window#parent-and-child-windows 0x05 探索可能窗口 既然窗口不是指主进程创建窗口之间父子关系...,目前来看,影响对象主要是 iframe、object、embed 如果 nodeIntegrationInSubFrames 设置为 true , preload 脚本中暴露方法和iframe

    24310

    前端基础知识整理汇总(上)

    同一个作用域下,对同一个函数不同调用会产生不同执行上下文环境,继而产生不同变量,所以,作用域中变量是在执行过程中确定作用域是在函数创建就确定。...b,不是出现错误。...箭头函数保持它当前执行上下文词法作用域不变,普通函数则不会。换句话说,箭头函数包含词法作用域中继承到了 this 。...纯函数也可以被看作成并用作数据使用 从常量和变量中引用它。 将其作为参数传递给其他函数。 作为其他函数结果返回它。 其思想是函数视为,并将函数作为数据传递。...4.实例并不是实例,只是子类实例 组合继承(原型链继承和构造函数继承)(常用) 核心:通过调用类构造,继承属性并保留传参优点,然后通过类实例作为子类原型,实现函数复用 function

    1.3K10

    浏览器同源策略跨域问题产生与解决

    三、iframe 如果两个网页不同源,就无法拿到对方DOM。典型例子是iframe窗口window.open方法打开窗口,它们与窗口无法通信。...比如,窗口运行下面的命令,如果iframe窗口不是同源,就会报错。...这个属性最大特点是,无论是否同源,只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它。 窗口先打开一个窗口,载入一个不同源网页,该网页信息写入window.name属性。...event.source:发送消息窗口 event.origin: 消息发向网址 event.data: 消息内容 下面的例子是,窗口通过event.source属性引用窗口,然后发送消息。...作为参数JSON数据被视为JavaScript对象,不是字符串,因此避免了使用JSON.parse步骤。

    1.1K30

    浏览器同源政策及其规避方法

    三、iframe 如果两个网页不同源,就无法拿到对方DOM。典型例子是iframe窗口window.open方法打开窗口,它们与窗口无法通信。...比如,窗口运行下面的命令,如果iframe窗口不是同源,就会报错。...这个属性最大特点是,无论是否同源,只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它。 窗口先打开一个窗口,载入一个不同源网页,该网页信息写入window.name属性。...event.source:发送消息窗口 event.origin: 消息发向网址 event.data: 消息内容 下面的例子是,窗口通过event.source属性引用窗口,然后发送消息。...作为参数JSON数据被视为JavaScript对象,不是字符串,因此避免了使用JSON.parse步骤。

    84660

    前端跨了个域

    location.hash 一个页面和从属于它 iframe 之间可以互相读取和修改 URL,但还是有一定前提:窗口对子窗口进行 url 读写,随意;窗口窗口 url 进行读写,受到同源策略限制...所以在这种情况下,窗口需要借助一个“代理窗口”去修改窗口 url。 通信交互过程如上。 接下来再讨论为什么 hash 可以实现传递数据需求。...23 iframe 通过 parent.parent.location.hash = self.location.hash.substring(1)数据传递给 A A 通过 hashchange...事件拿到对应数据 postMessage 这个方法就比较简洁明了:窗口窗口都可以作为数据发送方和接收方,且不需要考虑是否同源。...后端返回不是纯数据,而是用前端告知函数名包裹数据,传递到前端以后也就变成了一段可执行 js 代码 CORS 跨域 CORS(Cross Origin Resource Sharing)中心思想是

    65120

    vivo 商品中台可视化微前端实践

    它可以现有商品功能最大效率复用在很多业务上(公司内业务、公司外业务等)。不是仅限于当前团队业务使用。...三、可视化技术原理 可视化整体技术原理图如下: [图片] 从上图可以获得以下信息: 窗口iframe 展示; 窗口用 vuex 做状态管理; 窗口窗口通过共享状态 ( vue store...它包含以下关键内容: iframe 当成一个 dom 节点; 窗口渲染窗口iframe )暴露组件; 父子窗口共享 vue store; uni-render 技术原理图如下: [图片]...而我们通过 uni-render ,让窗口iframe 窗口数据通信不再需要 postMessage ,同时只使用 vue 生态中 vuex 做数据通信。...原因:iframe 预览页面为商品中台域名,应用接入主应用后为主应用域名,从而导致跨域。

    1.2K50
    领券