父窗口

作者: 深度_1175 | 来源:发表于2018-09-06 11:19 被阅读0次


<div class="col-md-4">
<form class="form-inline">
<select class="form-control">
<option selected="ture">行业类型</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>

</form>
</div>

=============================================
<div class="col-md-4">
<form class="form-inline">
<select class="form-control">
<option selected="ture">现有行业类型如下</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-primary">添加</button>
</span>
</div>
</form>
</div>

==================================================
1,父 html 调用子 iframe 内方法:

document.getElementById("iframe").contentWindow.func(data1,data2...);

2,子 Iframe 中 调用 父html中方法:

parent.func(data1,data2...)

===============================================

js之iframe子页面与父页面通信

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。

一、同域下父子页面的通信

父页面parent.html

[ 复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><html>
<head>
<script type="text/javascript">
function say(){
alert("parent.html");
} function callChild(){
myFrame.window.say();
myFrame.window.document.getElementById("button").value="调用结束";
} </script>
</head>
<body>
<input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html></pre>

[ 复制代码

](javascript:void(0); "复制代码")

子页面child.html

[ 复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><html>
<head>
<script type="text/javascript">
function say(){
alert("child.html");
} function callParent(){
parent.say();
parent.window.document.getElementById("button").value="调用结束";
} </script>
</head>
<body>
<input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>
</body>
</html></pre>

[ 复制代码

](javascript:void(0); "复制代码")

方法调用

父页面调用子页面方法:FrameName.window.childMethod();

子页面调用父页面方法:parent.window.parentMethod();

DOM元素访问

获取到页面的window.document对象后,即可访问DOM元素

注意事项

要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:

1. iframe上用onload事件

2. 用document.readyState=="complete"来判断

相关文章

  • jquey操作Iframe

    记录jquery操作iframe 子窗口调用父窗口中的方法 子窗口触发父窗口中的事件 父窗口中查找子窗口中的元素

  • BOM Window

    Window 对象 属性 方法 应用 实现子窗口向父窗口传值和父窗口向子窗口传值 父窗口代码 子窗口1代码 子窗口...

  • 父窗口

    行业类型 2 3 4 5 Left Middle Right ====================...

  • 使用iframe嵌套实现父子窗口通信

    父窗口: 子窗口 注意:父窗口给子窗口发信息,需要用iframe的contentWindow属性作为调用主体。子窗...

  • 子窗口嵌入父窗口

    事件响应 新创建项目中去掉窗口右下角角标的方法取消勾选SizeGripEnable 按钮样式 .pro文件变量 H...

  • 子窗口刷新父窗口

    window.opener.location.reload(); 灰常简单哈哈

  • wxPython 窗口

    创建窗口 parent : 父窗口,顶级窗口值:None,多文档界面的情况下,子窗口被限制为只能在父窗口中移动和缩...

  • window

    业务场景: 当前窗口打开子窗口,当子窗口关闭时候,父窗口刷新页面 窗口之间的通信方式 1. 父窗口启动计时器轮训子...

  • js中的window.top, window.self, win

    在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层...

  • Js中的window.parent ,window.top,wi

    在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层...

网友评论

      本文标题:父窗口

      本文链接:https://www.haomeiwen.com/subject/xpotgftx.html