<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"来判断
网友评论