父页面如何获取用户在iframe中选择的数据？

Scaarf 2017-04-17 11:18:16

需求是这样的，在父页面用户选择好提交的数据后，会弹出iframe页面，然后用户再在弹出的iframe页面中选择数据，最后将用户在父页面和ifame中选择的数据一起提交给后台，那父页面怎么拿到用户在iframe中(iframe中有表单)选择的数据呢

...全文

662 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

天涯共明月 2017-04-21

打赏
举报

Scaarf 2017-04-21

打赏
举报

引用 12 楼 mybook201314 的回复:

myIframeName.window.asd();//调用子页面asd(); 多半是你的这个有问题，不如你换一种写法呢：试一下吧，
parent.frames["frameName"].window.functionName();
frameName:IFrame的ID; funtionName:子页面中JS方法名; 如果实在是不行的话，我也没有办法了，反正就是这个思路，就是要看具体的实现了。有可能是浏览器不兼容的问题，获取其他的什么问题导致访问不了

解决了，找到问题了，快被自己玩死了。。。。。。我把子页面的方法function asd(){....}写到$(function(){......});里面去了。。。。移到$(function(){......});就好了

天涯共明月 2017-04-20

打赏
举报

myIframeName.window.asd();//调用子页面asd(); 多半是你的这个有问题，不如你换一种写法呢：试一下吧，

parent.frames["frameName"].window.functionName();

frameName:IFrame的ID; funtionName:子页面中JS方法名; 如果实在是不行的话，我也没有办法了，反正就是这个思路，就是要看具体的实现了。有可能是浏览器不兼容的问题，获取其他的什么问题导致访问不了

Scaarf 2017-04-20

打赏
举报

引用 10 楼 mybook201314 的回复:

可以获取子页面的按钮事件呀，比如提交按钮的/页面关闭按钮的等
$(window.frames["myIframe"].document).find("#子页面的提交按钮ID/页面关闭按钮的ID").onclick = function(){
      //在这里面打印你要获取的数据
}

我也是这么想的，想通过在子页面中定义一个方法，方法里面拿到子页面表单的数据，然后父页面调用这个方法，结果调用没反应，上面的alert("你倒是给点反应啊....");都能执行

		//给iframe页面加载完后给iframe中的按钮绑定点击事件（）
 		$("#myIframeId").on("load", function(event){
        	$("#rz",this.contentDocument).click(function(){
            	alert("你倒是给点反应啊....");
            	myIframeName.window.asd();//调用子页面asd();

            	
        	});
    	});

这是iframe

<div style="display:none;" id="showIframe">
	<iframe  name="myIframeName" id="myIframeId"  width="100%" height="100%" frameborder="0"></iframe>
</div>

Scaarf 2017-04-19

打赏
举报

引用 8 楼 mybook201314 的回复:

@Scaarf 你可以试一下呢，看看能否获取到form表单的值

这个我知道，就是在父页面拿iframe的数据时遇到了问题，比如我在父页面想打印拿到的iframe的数据时，我还没在iframe中选数据，alert($(window.frames["myIframe"].document).find("input:radio").attr("checked","true"));这句代码就执行了。。。那怎么控制这句代码在用户选择iframe中的数据后执行呢？这是父页面中js

		$("#aa").click(function(){
			$("#showIframe").show();//显示iframe子页面
			alert($("#bicycleTable").serialize());//序列化父页面表单
			//打印拿到的iframe页面数据
			alert($(window.frames["myIframe"].document).find("input:radio").attr("checked","true"));
		});

，这是父页面内容

<body>
<table width="100%"  border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td  id="aa">
    	<a href="stationSelect.jsp" target="a">
			<input type="button" value="入桩"/>
	</a>
    </td>
  </tr>
</table>

<div style="display:none;" id="showIframe">
	<iframe  name="a" id="myIframe"  width="100%" height="100%" frameborder="0"></iframe>
</div>

天涯共明月 2017-04-19

打赏
举报

可以获取子页面的按钮事件呀，比如提交按钮的/页面关闭按钮的等

$(window.frames["myIframe"].document).find("#子页面的提交按钮ID/页面关闭按钮的ID").onclick = function(){
      //在这里面打印你要获取的数据
}

天涯共明月 2017-04-17

打赏
举报

应该有一个返回函数，或者叫做 iframe窗口关闭后的回调函数

天涯共明月 2017-04-17

打赏
举报

@Scaarf 你可以试一下呢，看看能否获取到form表单的值

天涯共明月 2017-04-17

打赏
举报

先获取到iframe，然后根据form表单获取到form jquery:

$("formID").serialize();

这个就是获取表单id为formID的表单域值，他们分别是以&分割的，是以key=value的形式的

Scaarf 2017-04-17

打赏
举报

引用 3 楼 mybook201314 的回复:

@Scaarf 请参考： http://www.cnblogs.com/stone_w/archive/2012/04/01/2428257.html http://blog.csdn.net/w_basketboy24/article/details/8889085 这两篇文章写得很详细，可以借鉴一下，看看是否是你需要的

这个我昨天也百度到了，能解决我的问题。因为我的iframe中的form表单中刚好只有单选按钮这一个数据，那如果我iframe表单中有多种数据（比如输入框，多选框以及其他类的数据），这样一个一个去获取有点繁琐，能不能实现用户在iframe中选好后点击确定提交表单，然后在父页面拿到这个iframe中form表单提交的数据呢

Scaarf 2017-04-17