子页面iframe 操作父页面的元素

最新推荐文章于 2022-11-09 09:53:12 发布
最新推荐文章于 2022-11-09 09:53:12 发布
阅读量638 收藏
点赞数
分类专栏： layui jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Khun_HWJ/article/details/118935773
版权
jquery 同时被 2 个专栏收录
160 篇文章 4 订阅
订阅专栏
layui
48 篇文章 4 订阅
订阅专栏

如图：
在这里插入图片描述

需求：当在子iframe中增删改的操作时，父页面的导航栏要实时变化。

父页面的导航栏通过请求接口 来layui的模板引擎动态渲染的

父页面的动态模板 ↓ ↓ ↓
在这里插入图片描述
父页面装载的 ↓ ↓ ↓
在这里插入图片描述
一般情况下的js 模板引擎用法
在这里插入图片描述
但这里是子页面的操作来改变父页面的内容
所以需要找到父页面的相关元素

所以 由
[data-role="nav"]变为 $("[data-role='nav']", window.parent.document)
#navigation变为 $("#navigation", window.parent.document)

这样就可以操作父页面的元素了

重点
在这里插入图片描述

文档参考

Khun_HWJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe子页面获取父页面元素的方法
12-09
在网页开发中，有时我们需要在`iframe`子页面与父页面之间进行交互，例如获取或操作对方的DOM元素。这通常涉及到跨文档通信，因为`iframe`子页面被视为一个独立的文档，它有自己的窗口对象和文档对象模型（DOM）。...
iframe子父页面调用js函数示例
10-26
本文将详细介绍如何实现`iframe`子页面调用父页面的函数，以及父页面调用子页面的函数。 1. **iframe子页面调用父页面的函数** 在子页面中，通过`window.parent`属性，我们可以访问到父页面的全局作用域。如果要...
iFrame中子页面实现对父页面的操作
Welcome to Garywang's IT BLOG.
06-11 2792
1. 操作父页面中的JS全局变量window.parent.window.vParentJsVar = "来自子页面的修改";2. 操作父页面中的HTML元素var _parentDoc = window.parent.document;  _parentDoc.getElementById("HTML_ID").innerHTML = "来自子页面的修改";3. 子页面中重新定向父页面      window.top.location = 'default.aspx';4. 子页面中关才父页面     
iframe 子页面改变父页面样式
weixin_42040328的博客
11-08 2006
父元素改子元素样式（不跨域）： document.getElementById('ID名').contentWindow.document.body.style.backgroundColor="#f00"; 子元素改变父元素样式 var topWindow = $(window.parent.document); var $iframe = topWindow.find('标签名/类名');//查找相应的类名iframe //一共两种方法，你可以选择其中一种来..
iframe子页面操作父页面
m0_62089210的博客
11-09 1602
测试弹出层日志查看二级菜单主页
iframe中元素控制父级页面的操作
YoungC
10-09 922
在制作红包雨的过程中，因为想让红包雨复用，所以就用了iframe进行制作，但是中间出现了一些小的问题，比如在iframe中关闭了按钮，他之关闭了当前框架里面的页面，在父级页面中还是显示着这个iframe。相比也有很多小伙伴遇到了这个问题。那么接下来就上代码，帮助解决这个问题，亲测 var closeBtn = document.getElementById('closeBtn'); closeBtn.onclick = function (ev) { parent.windo
iframe子页面调用父页面的方法
尘封的落叶的博客
12-24 1041
1.有父页面部分代码如下： <div style="width:100%;height:auto"> <iframe src=' /sonIframe.jsp' width='100%' height='100%' frameborder='0' id='sonID'></iframe> </div> 2.设父页面有方法： f...
通过iframe的页面改变父页面标签的值
小青蛙
10-12 4112
window.parent.document.getElementById("mode_name").innerHTML=tt;
demo_DEMO_子页面刷新父页面iframe_
09-30
标题“demo_DEMO_子页面刷新父页面iframe_”暗示我们关注的焦点是关于如何在子页面中触发父页面的刷新操作，特别是在一个IFrame上下文中。下面将详细探讨这个主题。 首先，我们需要了解IFrame（内联框架）的基本...
iframe子页面操作父页面并实现屏蔽页面弹出层效果
09-28
在本文中，我们将探讨如何在使用iframe嵌套页面时，从子页面（iframe内部页面）操作父页面（包含iframe的页面），以屏蔽整个父页面并弹出特定的层。这种技术尤其适用于需要在子页面加载时阻止用户与父页面互动，同时...
利用JQuery操作iframe父页面、子页面的元素和方法汇总
10-19
首先，让我们来看看如何在`iframe`中查找或操作父页面的元素： 1. **在iframe中查找父页面元素**： ```javascript $('#id', window.parent.document) ``` 这段代码在`iframe`内部寻找ID为`id`的元素，`window....
iframe父页面获取子页面参数的方法
09-04
本篇文章将详细讲解如何在父页面中获取`iframe`子页面的参数，这对于实现跨窗口通信是至关重要的。 首先，让我们了解`iframe`的基本概念。`iframe`（Inline Frame）是一种HTML标签，用于在网页中嵌入另一个网页。它...
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
01-19
第一、在iframe中查找父页面元素的方法：$(‘#id’, window.parent.document) 第二、在父页面中获取iframe中的元素方法：$(this).contents().find(“#suggestBox”) 第三、在iframe中调用父页面中定义的方法和变量：...
jquery、js调用iframe父窗口与子窗口元素的方法整理
10-25
在网页开发中，有时我们需要在不同的窗口或者框架之间进行交互，比如在iframe子窗口操作父窗口的元素，或者反之。本文将详细介绍如何使用jQuery和JavaScript来实现这种跨窗口的元素操作。 1. **jQuery在iframe子...
嵌入式iframe子页面与父页面js通信的方法
10-24
在网页开发中，有时我们需要在嵌入的iframe子页面与包含它的父页面之间进行JavaScript通信。这通常是出于功能集成或者数据交互的需求。本篇文章将详细阐述如何在同域和跨域的情况下实现这样的通信。 首先，我们来看...
JQuery使用iframe子页面操作父页面中的元素与方法
青春不打烊的博客
10-25 1193
1.子页面查找父页面元素。
iframe操作父级iframe的元素
白白
10-23 526
$(document).on('click','.waite',function(){ var tree = $('#tree', window.parent.document);//父级元素 //下拉选中左侧导航栏layui-nav-itemed tree.find('li').eq(2).addClass('layui-nav-itemed'); //选中dd
iframe操作父级页面中html元素
Jinx
05-22 1747
html中嵌入一个iframe；现在想在iframe中操作父级html中的元素； 操作如下: 父级html<html> <head></head> <body> <div id="father" >父级html</div> <iframe src="iframe.html"></iframe> </body> </html>iframe页面
子框架页刷新父页面其它框架的办法
fxhflower的专栏
08-24 5122
子框架页刷新父页面其它框架的办法   为了给论坛左栏加上一个刷新论坛的按钮,想了半天,嘿嘿..终于搞定了. 面以三个页面分别命名为framedemo.html,top.html,button.html为例来具体说明如何做。 其中framedemo.html由上下两个页面组成，代码如下： frameDemo
iframe父页面向子页面传值
最新发布
08-19
在使用iframe时，父页面向子页面传值的方法如下所示：在父页面的JS代码中，可以通过postMessage函数向子页面发送消息。该函数需要两个参数，即key和value，分别表示字段名和值。首先，通过获取iframe元素，然后使用contentWindow属性获取iframe的contentWindow对象。接着，调用postMessage函数，将要传递的数据以对象的形式传入，对象的key对应字段名，value对应值。具体代码如下所示：postMessage: function (key, value) { let iframe = $('iframe')[0]; if (iframe) { iframe.contentWindow.postMessage({ 'key': key, 'value': value }, iframe.src); } }。这样，父页面就能够向子页面传递值了。 [2<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [iframe 父子页面之间传值](https://blog.csdn.net/Caocui_/article/details/122664544)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [JS父页面与子页面相互传值方法](https://download.csdn.net/download/weixin_38631738/13049741)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值