父元素与子iframe相互获取变量和元素对象的具体实现

 更新时间:2013年10月15日 17:07:01   作者:  
父元素与子iframe相互获取变量和元素对象的方法有很多,本文提供了一些不错的示例另收集网上的一些,可以参考下
父中:
复制代码 代码如下:

<input id="username"type="text" />
<scripttype="text/javascript">
var count = 1;
</script>

-------------------------------------------------------------
子iframe中:
复制代码 代码如下:

<scripttype="text/javascript">
alert(window.parent.count); //获取父中的js变量
alert($("#username", window.parent.document));//获取父中jQuery对象
alert(window.parent.document.getElementByIdx_x('username'));//获取父中DOM对象
</script>

--------------------------------------------------------------------------------------------------

子iframe中(id="iframeId"name="iframeName"):
复制代码 代码如下:

<input id="username"type="text" />
<scripttype="text/javascript">
varcount = 1;
</script>

-------------------------------------------------------------
父中:
复制代码 代码如下:

<scripttype="text/javascript">
alert(document.iframeName.count);//获取子iframe中的js变量
alert($(window.frames["iframeName"].document).contents().find("#username"));//获取子iframe中jQuery对象
alert($("#username",document.frames("iframeName").document));//获取子iframe中jQuery对象
alert(window.document.getElementById('iframeId').contentWindow.document.getElementByIdx_x('username'));//获取子iframe中DOM对象
</script>

收集网上的一些示例:
用jQuery在IFRAME里取得父窗口的某个元素的值
只好用DOM方法与jquery方法结合的方式实现了

1. 在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");
2. 在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input:radio").attr("checked","true");
父窗口想获得IFrame中的Iframe,就再加一个frames子级就行了,如:
$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");
3.在子窗口中调用父窗口中的另一个子窗口的方法(FRAME):
parent.frames["Main"].Fun();
注意:建议使用[],这样比较兼容多个浏览器,()火狐/搜狗/谷歌不兼容。

相关文章

  • document.createElement()用法及注意事项(ff下不兼容)

    document.createElement()用法及注意事项(ff下不兼容)

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素
    2013-03-03
  • uni-app PC端宽屏适配方案图文详解

    uni-app PC端宽屏适配方案图文详解

    现在uni-app终于官方支持PC宽屏,下面这篇文章主要给大家介绍了关于uni-app PC端宽屏适配方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • JS用 或 || 来兼容FireFox!

    JS用 或 || 来兼容FireFox!

    JS用 或 || 来兼容FireFox!...
    2006-11-11
  • JavaScript定义变量和变量优先级问题探讨

    JavaScript定义变量和变量优先级问题探讨

    这篇文章主要介绍了JavaScript定义变量和变量优先级的问题探讨,变量的定义还有这么讲究吗,不错,看完本文相信你会有一定的收获,需要的朋友可以参考下
    2014-10-10
  • JavaScript四种调用模式和this示例介绍

    JavaScript四种调用模式和this示例介绍

    JavaScript调用时除了声明时定义的形参外,每个函数接受两个附加参数:this 和arguments,下面为大家介绍下JavaScript四种调用模式和this
    2014-01-01
  • 在js里怎么实现Xcode里的callFuncN方法(详解)

    在js里怎么实现Xcode里的callFuncN方法(详解)

    下面小编就为大家带来一篇在js里怎么实现Xcode里的callFuncN方法(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js输入框邮箱自动提示功能代码实现

    js输入框邮箱自动提示功能代码实现

    一个输入框当我输入任何字的时候自动下拉相应的邮箱提示,在输入框输入11的时候下拉框有所有11的邮箱 输入其他的时候 有其他文案对应的邮箱,下面实现这个自动提示功能
    2013-12-12
  • JavaScript实现的浮动层框架用法实例分析

    JavaScript实现的浮动层框架用法实例分析

    这篇文章主要介绍了JavaScript实现的浮动层框架用法,以实例形式分析了JavaScript实现可关闭的半透明浮动层相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • js仿网易表单及时验证功能

    js仿网易表单及时验证功能

    这篇文章主要为大家详细介绍了一个网易表单以及及时验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Bootstrap轮播图的使用和理解4

    Bootstrap轮播图的使用和理解4

    这篇文章主要为大家详细介绍了关于Bootstrap轮播图的使用和理解的学习记录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论