子页面通过 JS 操作父页面的内容

最新推荐文章于 2021-04-14 17:13:18 发布

getdate

最新推荐文章于 2021-04-14 17:13:18 发布

阅读量2k

点赞数

分类专栏： JavaScript 文章标签： iframe

本文链接：https://blog.csdn.net/getdate/article/details/6903254

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

比如 main.html 面的相关信息如下

<body >
<H1 id="h1Title"> H1内容</H1>
<iframe id="leftFrame" name="leftFrame" src="page/includes/left.html"></iframe>
<iframe id="centerFrame" name="centerFrame" width="537px" height="1000px"  src="page/includes/center.html"></iframe>		
</body>

如果 left.html 中想改变 main.html 中H1 的内容则可以通过如下方式来改变

window.parent.document.getElementById("h1Title").innerHTML = "aabbccdd";

如果在center.html 要想执行left.html 中的JS函数 testLeft(),则方法如下：

top.window.frames["leftFrame"].testLeft() 即可。

注意事项： iframe 必须有 name 属性否则在火狐浏览其中 top.window.frames["leftFrame"].*是不起作用的！也就是找不大到对应“名称”的iframe

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

getdate

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Js 子窗口更改父窗口控件值

YearnForKnowled的博客

04-22

446

Js 子窗口更改父窗口控件值开启子窗口: window.open(’.url?field=’ + strField, ‘_media’, ‘width=320,height=190,resizable=no,left=150,top=180’); 微软技术文档解释:https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.forms.htmlwindow.open?view=net-5.0 关闭子窗口给子窗口控件一个 Href 属性, 用来

子页面修改父页面元素或顶层页面元素

ygl6150373的博客

02-23

1950

String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'left.jsp' star

参与评论您还未登录，请先登录后发表或查看评论

子页面给父页面元素赋值（两种方法，亲测有效）

trouble is a friend

01-04

7780

新年快乐新年第一篇~！情景:如图，点击子页面的某个树节点（“入院记录-辅助检查”），父页面的“物理表名”变化方法一：子页面触发父页面的方法，父页面的方法取子页面的值后再给自己的元素赋值这是我在项目中用的第一种方法，比较费直接看代码：（1）父页面表单：有一个 setTableNameFromChildJsp(this) 事件 <tr> &l...

前端框架子页面获取/修改父页面的元素的方法

kevin_chen技术博客

06-10

2305

$("#pronum",parent.document).html(newnum); //其中pronum是元素的ID 在开发中，遇到的场景是，子页面进行操作之后，需要修改父页面的提醒数量；刷新父页面，回到了系统首页，不符合要求；仅仅刷新子页面，提醒的数字不会动态的修改；最后找到的解决方案。 ...

js中实现子页面向父页面中赋值

11-16

6672

js中实现子页面向父页面中赋值

demo_DEMO_子页面刷新父页面iframe_

09-30

标题“demo_DEMO_子页面刷新父页面iframe_”暗示我们关注的焦点是关于如何在子页面中触发父页面的刷新操作，特别是在一个IFrame上下文中。下面将详细探讨这个主题。首先，我们需要了解IFrame（内联框架）的基本...

iframe子页面与父页面在同域或不同域下的js通信

10-25

在讨论iframe子页面与父页面间的JavaScript通信时，首先需要理解同域与跨域的概念。同域指的是两个页面的协议、域名和端口完全相同。跨域则是指页面的协议、域名或端口中的一个或多个不同。在同域环境下，iframe与...

两个JSP页面父页面获取子页面内容的两种方法

10-25

父页面可以通过JavaScript操作iframe中的内容，比如获取iframe中id对应元素的值。这种方法的优点是实现简单，使用标准的JavaScript和jQuery就可以完成内容的提取，而且对于iframe中的页面状态没有特别的限制。缺点是...

JS子父窗口互相操作取值赋值的方法介绍

01-21

对应javascript版本为window.parent.document.getElementByIdx_x(“父窗口元素ID”)；取父窗口的元素方法：$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用：$(selector, window.parent...

iframe子页面操作父页面并实现屏蔽页面弹出层效果

09-28

在本文中，我们将探讨如何在使用iframe嵌套页面时，从子页面（iframe内部页面）操作父页面（包含iframe的页面），以屏蔽整个父页面并弹出特定的层。这种技术尤其适用于需要在子页面加载时阻止用户与父页面互动，同时...

子页面控制父页面元素修改样式

WinterPlumage

08-06

2556

在子页面添加这句话即可: $("父页面啊指定的id",window.parent.document).removeClass("col-md-10");

js iframe 父页面调用子页面方法

qq_40615333的博客

04-14

2900

iframe 父页面调用子页面方法子页面 <script type="text/javascript"> function test(){ console.log("test") } </script> 父页面 <iframe src="./MaterialList.html" id="materialList" name="materialList" style="width:99%"></iframe> var iframe = document.

js 子页面控制父页面操作刷新、跳转

Mia_Zhu的博客

08-31

3507

一、子页面和父页面父页面：当前页面子页面：从当前页面打开的新页面二、操作在子页面中写上(刷新父页面)：window.opener.location.reload();在子页面中让父页面跳转：opener.location.href = '';...

JQuery 主页面调用子页面(<iframe>)中的JS方法，子页面调用主页面的JS方法

houyanhua1的专栏

01-15

2万+

//调用子页面的方法. var childWindow = $("#addFrame")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。 []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。 childWindow.subFunction(); //调用子页面中的subFunction方法

使用js操作子页面iframe内的元素节点

C_william的博客

12-11

8547

最核心的就是获取iframe中的元素节点上代码： var _iframe = document.getElementById('iframe').contentWindow;//选中iframe元素并且通过contentWindow获取iframe中window对象 var _div =_iframe.document.getElementById('div');//这一

jquery、js父子页面操作总结

bcbobo21cn的专栏

03-04

2032

jquery 父、子页面之间页面元素的获取，方法的调用 https://www.cnblogs.com/it-xcn/p/5896231.html 一、jquery 父、子页面之间页面元素的获取，方法的调用： 1. 父页面获取子页面元素：格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click(); 实例：$(...

js子页面调用父页面方法与父页面调用子页方法

子页面 通过 JS 操作 父页面的内容

子页面通过 JS 操作父页面的内容