jquery、js父子页面操作总结

jquery 父、子页面之间页面元素的获取，方法的调用

https://www.cnblogs.com/it-xcn/p/5896231.html

一、jquery 父、子页面之间页面元素的获取，方法的调用：

1. 父页面获取子页面元素：

格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();

实例：$("#ifm").contents().find("#iBtnOk").click(); // ifm 为 <iframe> 标签 id; iBtnOk 为子页面按钮 id

2. 父页面调用子页面方法：

格式：$("#iframe的ID")[0].contentWindow.iframe方法();

实例：$("#ifm")[0].contentWindow().iClick(); // ifm 为 <iframe> 标签 id; iClick为子页面 js 方法

3. 子页面获取父页面元素：

格式：$("#父页面元素id" , parent.document);

实例：$("#pBtnOk" , parent.document).click(); // pBtnOk 为父页面标签 id

二、原生 js 父页面元素的获取，方法的调用：

1. 子页面调用父页面方法：

格式：parent.父页面方法

实例：parent.pClick(); // pClick 为父页面 js 方法

2. 子页面获取父页面元素：

格式：window.parent.document.getElementById("父窗口元素ID");

实例：window.parent.document.getElementById("pBtnOk");// pBtnOk为父页面标签 id

========

jquery 获取父窗口的元素、父窗口、子窗口

https://www.cnblogs.com/goloving/p/7642381.html

一、获取父窗口元素：

　　$("#父窗口元素ID",window.parent.document)；对应javascript版本为window.parent.document.getElementById("父窗口元
素ID")；

　　取父窗口的元素方法：$(selector, window.parent.document);

　　那么你取父窗口的父窗口的元素就可以用：$(selector, window.parent.parent.document);

　　类似的，取其它窗口的方法大同小异

　　$(selector, window.top.document);

　　$(selector, window.opener.document);

　　$(selector, window.top.frames[0].document);

二、Javascript弹出子窗口

　　可以通过多种方式实现，下面介绍几种方法

(1) 通过window对象的open()方法，open()方法将会产生一个新的window窗口对象

　　其用法为：window.open(URL,windowName,parameters);

　　URL: 描述要打开的窗口的URL地址，如何为空则不打开任何网页；

　　windowName:描述被打开的窗口的名称，可以使用'_top'、'_blank'等内建名称，这里的名称跟<a href="..." target="...">
里的target属性是一样的。

　　parameters:描述被打开的窗口的参数值，或者说是样貌，其包括窗口的各个属性值，及要传入的参数值。

　　例如：

//打开一个400 x 100 的干净的窗口：
open
('','_blank','width=400,height=100,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resiz
able=yes')

//也可以这样写：
var newWindow = open('','_blank');
　　参数说明如下：

top=# 窗口顶部离开屏幕顶部的像素数

left=# 窗口左端离开屏幕左端的像素数

width=# 窗口的宽度

height=# 窗口的高度

menubar=... 窗口有没有菜单，取值yes或no

toolbar=... 窗口有没有工具条，取值yes或no

location=... 窗口有没有地址栏，取值yes或no

directories=... 窗口有没有连接区，取值yes或no

scrollbars=... 窗口有没有滚动条，取值yes或no

status=... 窗口有没有状态栏，取值yes或no

resizable=... 窗口给不给调整大小，取值yes或no

　　(2) 在javascript中除了通过open()方法建立window对象实现弹出窗口外，还可以通过建立对话框的方式弹出窗口。如：

alert(""); //弹出信息提示对话框

confirm(""); //弹出信息确认对话框

prompt(""); //具有交互性质的对话框

　　但是，上述实现的弹出窗口具有的功能较为单一，只能完成较为简单的功能。对于需要在对话框中显示多个数据信息，甚至是
HTML控件就无能为力了。

　　(3) 使用模态对话框实现复杂的对话框需求

　　在javascript的内建方法中还有一类方法可以实现通过对话框显示HTML内容，也就是说可以通过创建对话框的方式来完成创建
窗口对象所能完成的功能。

　　包括创建模态对话框和非模态对话框两种。

　　实现方法为：

//创建模态你对话框

window.showModalDialog(sURL,vArguments,sFeatures)

//创建非模态对话框

window.showModelessDialog(sURL,vArguments,sFeatures)

　　其区别在于：用showModelessDialog()打开窗口时，不必用window.close()去关闭它，当以非模态方式［IE5］打开时，打开
对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口URL改变时，它自动关闭。而模态［IE4］方
式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的
链接关系依然保存，并且隐藏在活动窗口的下面。showModeDialog()则不然。

　　参数说明：

sURL：必选参数，类型：字符串。用来指定对话框要显示的文档的URL

vArguments：可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过
window.dialogArguments来取得传递进来的参数

sFeatures：选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开

dialogHeight：对话框高度，不小于100px，IE4中dialogHeight和dialogWidth 默认的单位是em，而IE5中是px，为方便其见，在
定义modal方式的对话框时，用px做单位

dialogWidth: 对话框宽度

dialogLeft: 距离桌面左的距离

dialogTop: 离桌面上的距离

center: 窗口是否居中，默认yes，但仍可以指定高度和宽度,取值范围{yes | no | 1 | 0 }

help: 是否显示帮助按钮，默认yes，取值范围{yes | no | 1 | 0 }

resizable: 是否可被改变大小，默认no，取值范围{yes | no | 1 | 0 } ［IE5+］

status: 是否显示状态栏，默认为yes[ Modeless]或no[Modal]，取值范围{yes | no | 1 | 0 } ［IE5+］

scroll:指明对话框是否显示滚动条，默认为yes，取值范围{ yes | no | 1 | 0 | on | off }

还有几个属性是用在HTA中的，在一般的网页中一般不使用。

dialogHide:在打印或者打印预览时对话框是否隐藏，默认为no，取值范围{ yes | no | 1 | 0 | on | off }。

edge:指明对话框的边框样式，默认为raised，取值范围{ sunken | raised }。

unadorned:默认为no，取值范围{ yes | no | 1 | 0 | on | off }。

　　传入参数：要向对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可
以传递对象

var newWin=window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px,
dialogTop:100px,dialogWidth:300px, status:0, edge:sunken');
newWin.open();
　　与使用window.open()方法创建窗口相比，模态方法创建窗口的区别在于有模态方法创建的窗口后将不能操作父窗口。

三、子窗口与父窗口间通信：

　　(1) 使用window.open()创建的窗口与父窗口通信

　　可以在子窗口页面中通过window.opener来获取父窗口对象，获取之后子窗口便可以对父窗口执行刷新，传值等操作。

window.opener.location.reload(); //子窗口刷新父窗口
window.opener.location.href //获取父窗口href
window.opener.locaiton.pathname //获取父窗口路径名

//刷新父页面
window.location.href=window.location.href ; //重新定位父页面
window.location.reload;

　　(2) 模态窗口与父窗口通信

　　通过使用showModelDialog() 及showModelessDialog() 方法创建的子窗口想与父窗口通信时，不能通过window.opener来获取
父窗口对象。

　　要实现通信，必须在创建模态子窗口时向子窗口传入父窗口对象。

　　（一）实现方式为：

　　1、在父窗口中：

var newWin=window.showModelDialog(url,window,'');

newWin.open();

此时参数window即是父窗口对象

　　2、在子窗口中：

　　需首先获取父窗口对象，然后才能使用父窗口对象。由于父窗口对象是在创建子窗口时通过传入参数的方式传入的，因此，在
子窗口中也只能通过获取窗口参数的方式获取父窗口对象。获取方式如下：

　　var parent=widnow.dialogArguments；

　　变量parent便是父窗口对象。

//通过子窗口提交父窗口中的表单：form1,提交后执行查询操作
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();

//刷新父页面
var parent=window.dialogArguments;
parent.location.reload();

　　从子窗口传值到父窗口：要实现在模态子窗口中传值到父窗口，需要使用window.returnValue完成

　　（二）实现方法如下：

　　1、在子窗口中：

//获取父窗口某字段值，对该值加一后返回父窗口
var parent=window.dialogArguments;//获取父窗口对象
var x=parent.docuement.getElementById("age").value;
x=x+1；

//传回x值
window.returnValue=x;

　　2、在父窗口中：

//获取来自子窗口的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null){
document.getElementById("age").value=newWin;
}
　　（三）在子窗口中设置父窗口的值

　　在子窗口中向父窗口中传入值似乎没有直接设置父窗口中的值来得明了。直接设置父窗口中元素的值显得要更灵活一些，不过
具体使用哪种方法要根据实际情况和已有的实现方式而定，因为如果使用了不切实际的方法不仅降低开发效率，也降低了执行效率
，往往也会造成不优雅的实现方式和代码风格。

　　子窗口设置父窗口的值使用方法如下：

　　1、子窗口中：

var parent=window.dialogArguments;
var x=parent.document.getElementById("age").value;
x=x+1;
　　2、设置父窗口中age属性值

parent.document.getElementById("age").value=x;
　　

　　以上是我在项目中使用javascript解决子窗口问题时，收集及积累的一些方法和资料。其实不论是使用window.open()还是使
用window.showModelDialog()进行传参等操作时，虽然在实现方法上有很大的差别，初次接触会觉得有点乱，但只要理清子窗口与
父窗口之间的关系和角色之后，就很好理解了。

========

利用JQuery操作iframe父页面、子页面的元素和方法汇总

https://www.jb51.net/article/123314.htm

主要给大家介绍了关于利用JQuery操作iframe父页面、子页面的元素和方法的相关资料，

iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，本文主要给大家分享了关于简单使用JQUERY来操作
IFRAME的一些记录，这个使用纯JS也可以实现。

第一、在iframe中查找父页面元素的方法：

$('#id', window.parent.document)

第二、在父页面中获取iframe中的元素方法：

$(this).contents().find("#suggestBox")

第三、在iframe中调用父页面中定义的方法和变量：

parent.method parent.value

JQUERY、JS调用IFRAME父窗口与子窗口元素的方法

1. jquery 在iframe子页面获取父页面元素代码如下:

$("#objid", parent.document)

2. jquery在父页面获取iframe子页面的元素代码如下:

$("#objid",document.frames('iframename').document)

3.js 在iframe子页面获取父页面元素代码如下:

indow.parent.document.getElementByIdx_x("元素id");

4.js 在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x("元素id");

5.子类iframe内调用父类函数：

window.parent.func();

========

jquery 父子页面传参的解决方案

https://blog.csdn.net/zxmin1302/article/details/83623023

父页面相关：

按钮：

<button class="btn tab btn-default" value="1" id="tz" style="height: 35px;width: 135px;">跳转</button>
js逻辑：

$('#tz').on('click',function(){
window.open('xxxx?data=1', '_blank', 'height=900, width=1000, top=0, left=0, toolbar=no, menubar=no,
scrollbars=no, resizable=no, location=no, status=no');
});
function returnDataParam(data){
console.log(data);
return data;
}
获取子页面的url参数

//获取url参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
子页面传参：

var data = GetQueryString(data);
if(data==1){
var dataParam = {
url : 'xxxx',
indicators :'xxxx',
conditions : 'xxxx'
}
//条件筛选整理成相关的字符串

//获取数据参数
alert('数据提取成功!');
window.opener.returnDataParam(dataParam);
//关闭当前窗口
window.close();
}

========

JS 和 JQuery 对 Iframe 内外（父子）页面进行操作

https://blog.csdn.net/andseny/article/details/53138509

在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素

在父窗口中获取iframe中的元素

1、格式：window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click();

实例：window.frames["ifm"].document.getElementByIdx_x("btnOk").click();

2、var obj=document.getElementByIdx_x("iframe的name").contentWindow;

var ifmObj=obj.document.getElementByIdx_x("iframe中控件的ID");

fmObj.click();

实例：var obj=document.getElementByIdx_x("ifm").contentWindow;

var ifmObj=obj.document.getElementByIdx_x("btnOk");

ifmObj.click();

在iframe中获取父窗口的元素

格式：window.parent.document.getElementByIdx_x("父窗口的元素ID").click();

实例：window.parent.document.getElementByIdx_x("btnOk").click();

jquery

在父窗口中获取iframe中的元素

1、格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1

实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1

2、格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2

实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

在iframe中获取父窗口的元素

格式：$('#父窗口中的元素ID', parent.document).click();

实例：$('#btnOk', parent.document).click();

新增方法：

1.js在iframe子页面操作父页面元素代码：

window.parent.document.getElementByIdx_x("父页面元素id");
2.js在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x("子页面元素id");
3. jquery在iframe子页面获取父页面元素代码如下:

$("#objid",parent.document)
4. jquery在父页面获取iframe子页面的元素·

$("#objid",document.frames('iframename').document)
5.在iframe中调用父页面中定义的方法和变量：

window.parent.window.parentMethod();
window.parent.window.parentValue;
6.在父页面操作iframe子页面的方法和变量

//code from http://caibaojian.com/js-get-iframe.html
window.frames["iframe_ID"].window.childMethod();
window.frames["iframe_ID"].window.childValue;

========

jquery_iframe父子级页面事件使用

https://www.cnblogs.com/sugege/p/7902766.html

1、index.html

<body topmargin='0' leftmargin='0' style="background:#ccc">　　　　//这里的属性只是为了全屏下边无间隙
　　index.html
<iframe src="main.html" id="indexMain" style="margin-bottom:-5px;position:relative;"></iframe>　　　　//这里的
样式的为了跳转之后移动端input输入完成之后下边无间隙
</body>

2、main.html

========