在html中普通的父容器调用子容器中的方法十分简单

因为这两个容器的所有方法和属性都在同一个dom模型中

可以直接控制和使用

但是如果子容器中是一个iframe标签又是怎样的情况?

iframe请求另外一个页面并显示

这时候父子容器的方法和属性等都不在一个dom模型中了

有些情况又要求父子容器能够互相调用方法来实现某一功能

这时候要怎么实现这个要求呢

其实一个html页面内的所有方法等最后都会被加载到该页面dom模型的window内

例如经常使用的

window.onload()//在页面加载完成后执行的事件/方法

如果在一个页面内定义了一个js方法

function DoSomething(){...}

那么这个方法最后会被加载到window下面

可以通过这个window点出来并使用这个方法

那么,现在只要能够拿到子容器iframe内部页面的window就可以在父容器中调用子容器的方法了

例子:

HtmlPage1.html页面中

<input type="button" id="btnShowChild" value="点击弹出子容器"/>
<div id="divChild">
<iframe id="ifmChild" src="javascript:void(0)"></iframe>
</div>

页面如下:

很简单就一个按钮的页面

点击这按钮,弹出id为divChild的div

在这个div中包含一个iframe

在点击按钮弹出div的同时设置iframe的src属性为HtmlPage2.html

为了方便操作使用到了jquery easyui的插件

在该页面中输入以下js代码:

//在窗体加载完成后
$(function () {
//获得div
var divChild = $("#divChild");
//刚开始的时候设置div隐藏
divChild.css("display", "none"); //按钮点击事件
$("#btnShowChild").click(function () {
//设置iframe的src属性为HtmlPage2.html
$("#ifmChild").attr("src", "HtmlPage2.html");
//显示div
divChild.css("display", "block");
//将div以对话框的形式弹出(easyui)
divChild.dialog({
title: "我是父容器",
buttons: [{
//确认按钮
text: '提交子容器中的表单',
iconCls: "icon-ok",
handler: function () {
//点击该按钮之后执行的方法 }
}, {
//关闭按钮
text: '关闭',
handler: function () {
$("#divChild").dialog('close');
}
}]
});
});
});

HtmlPage2.html页面:

 <form id="fmSubmit">
<table>
<tr>
<td colspan="2">
我其实是一个Iframe标签,是一个子容器
</td>
</tr>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" id="txtUid" name="txtUid"/>
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" id="txtPwd" name="txtPwd"/>
</td>
</tr>
</table>
</form>

一个表单包含一个table的简单布局

现在回到HtmlPage1.html页面

点击页面上的按钮:

这时候已经将HtmlPage2.html页面通过一个iframe标签以子容器的形式显示在HtmlPage1.html页面中

这时我们需要的效果是

点击“提交子容器中的表单”按钮

使HtmlPage2.html中的表单异步提交

成功提交之后再HtmlPage1.html中关闭这个子容器,并将HtmlPage1.html页面上的按钮值显示为“完成”

首先要通过点击父容器中的一个按钮来执行子容器中的一个方法使表单提交

可以通过获得子容器的window来得到并执行这个方法

所以在HtmlPage2.html中定义这样一个js方法:

//提交表单方法
function SubmitForm() {
//获得页面文本框的值
var txtUid = $("#txtUid").val();
var txtPwd = $("#txtPwd").val();
//通过jquery异步提交表单
$.ajax({
url: "Handler1.ashx",
data: "Uid=" + txtUid + "&&Pwd=" + txtPwd,
type: "Get",
success: function(res) {
if (res == "ok") {
//提交成功之后执行的方法 } else {
alert("子容器iframe异步提交出错!");
}
}
});
}

通过一个一般处理程序来接收数据并简单的判断然后返回数据

context.Response.ContentType = "text/plain";
if (context.Request.QueryString["Uid"] == "111" && context.Request.QueryString["Pwd"] == "111")
{
context.Response.Write("ok");
}
else
{
context.Response.Write("error");
}

此时在HtmlPage1.html并不知道怎么来获得子容器的window

但是可以知道ifram标签肯定是重要的目标,因为是它在承载显示另外一个页面

所以可以在页面1中的“提交子容器中的表单”按钮事件先获得这个iframe标签,然后观察它的属性

divChild.dialog({
title: "我是父容器",
buttons: [{
//确认按钮
text: '提交子容器中的表单',
iconCls: "icon-ok",
handler: function () {
//点击该按钮之后执行的方法
//获得子容器的iframe标签
var ifmChild = $("#ifmChild");
}
}, {
//关闭按钮
text: '关闭',
handler: function () {
$("#divChild").dialog('close');
}
}]
});

在浏览器中打开页面1,并进行调试

点击“弹出子容器”按钮

并点击对话框中的“提交子容器中的表单”按钮,命中断点,将ifmChild添加监视查看

可以看到,这个ifame标签似乎是一个数组,而且只有一个元素

那么打开这唯一一个元素看看里面有没有window属性

但是找了全部找了一遍好像没有发现window这个属性

但是却找到了一个contentWindow,它在这里

可以看到这个contentWindow后面还跟着一个[object Window]

先不管这是啥意思

反正跟window有关先拿来用看看

还是修改对话框中按钮的事件

divChild.dialog({
title: "我是父容器",
buttons: [{
//确认按钮
text: '提交子容器中的表单',
iconCls: "icon-ok",
handler: function () {
//点击该按钮之后执行的方法 //获得子容器的iframe标签
//var ifmChild = $("#ifmChild"); var childWindow = $("#ifmChild")[0].contentWindow;
childWindow.SubmitForm();
}
}, {
//关闭按钮
text: '关闭',
handler: function () {
$("#divChild").dialog('close');
}
}]
});

其实到这里很明了了,如果有装R#插件的同学可以甚至直接在childWindow点出子容器中的SubmitForm方法

然后转到页面2

在表单提交成功后的事件中

获得当前window的parent属性

这个属性就是页面1的window,因为页面1就是页面2的父容器

如此一来,就可以再页面2中直接使用父容器页面1中的方法了

//通过jquery异步提交表单
$.ajax({
url: "Handler1.ashx",
data: "Uid=" + txtUid + "&&Pwd=" + txtPwd,
type: "Get",
success: function(res) {
if (res == "ok") {
//提交成功之后执行的方法
window.parent.AfterChildSubmit();
} else {
alert("子容器iframe异步提交出错!");
}
}
});

所以要在页面1中准备一个AfterChildSubmit方法

function AfterChildSubmit() {
//关闭对话框
$("#divChild").dialog('close');
//消息提示
alert("子容器成功调用父容器的AfterChildSubmit方法");
//修改按钮的值
$("#btnShowChild").val("完成");
}

最后测试如下:

dom元素父子容器互相调用控制的更多相关文章

  1. 通过class和id获取DOM元素的区别

    1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...

  2. Angular获取dom元素,以及父子组建之间相互传值

    1.使用原生js代码获取dom元素 在ts文件中有一个ngOnInit()的方法,这个方式是指在模块加载完毕之后并不是dom加载完毕,也就是说如果你的dom元素中使用的angular的指令,然后想在这 ...

  3. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 笔记:javascript操作iframe内的DOM元素,及调用iframe内的方法

    iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...

  5. 防止用iframe调用网页dom元素

    <system.webServer> <httpProtocol> <customHeaders> <add name="X-Frame-Optio ...

  6. JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  7. JavaScript-dom3 json_str dom元素控制 模拟百度搜索

    访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  9. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

随机推荐

  1. joyOI 选课 【树形dp + 背包dp】

    题目链接 选课 题解 基础背包树形dp #include<iostream> #include<cstdio> #include<cmath> #include&l ...

  2. 《R语言实战》读书笔记--第二章 创建数据集

    2.1数据集的概念 变量的类型是不同的,比如标示符.日期变量.连续变量.名义变量.有序型变量等,记得数据挖掘导论中有专门的描述. R可以处理的数据类型包括了数值型.字符型.逻辑型.复数型(虚数).原生 ...

  3. eclipse内存不够

    在使用Eclipse的Build Project功能时,提示以下错误: An internal error occurred during: “Build Project”. GC overhead ...

  4. JSONP原理小记

    大家都知道JSONP(JSON with padding参数式JSON)是跨域传输数据的方法,jq等很多类库都封装了JSONP的方法,但是他的原理是怎样的呢?下面举个我认为最浅显的栗子,大家看过了都会 ...

  5. CodeVs1515 跳

    题目描述 Description 邪教喜欢在各种各样空间内跳. 现在,邪教来到了一个二维平面.在这个平面内,如果邪教当前跳到了(x,y),那么他下一步可以选择跳到以下4个点:(x-1,y), (x+1 ...

  6. 全自动google检索后台

    是不是每天为了找后台,伤破了蛋,每次在google输入”site:www.xxx.com intitle:登陆”.是不是手都累麻了,无聊又浪费时间.有了它,你的蛋就不用在碎了 直接上源码 1 2 3 ...

  7. 3.安装OpenStack-keystone

    安装keystone(控制器上安装) 使用root用户访问数据库 mysql -uroot -ptoyo123 CREATE DATABASE keystone; GRANT ALL PRIVILEG ...

  8. node.js批量重命名文件

    把当前路径的img文件夹里面的文件加上.png后缀 var fs = require("fs"); var path = 'img' fs.readdir(path, functi ...

  9. Informix 启动 Fatal error in shared memory initialization解决方法

    https://blog.csdn.net/cy309173854/article/details/54929735

  10. BZOJ 4589 Hard Nim(FWT加速DP)

    题目链接  Hard Nim 设$f[i][j]$表示前$i$个数结束后异或和为$j$的方案数 那么$f[i][j] = f[i-1][j$ $\hat{}$ $k]$,满足$k$为不大于$m$的质数 ...