今天写的程序涉及到JS框架传值的问题,这些是我找到的一些资料
 
下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数 仅需 [ parent.window.你的函数 ] 就可以了
 
DOM方法：
父窗口操作IFRAME：window.frames["iframeSon"].document
IFRAME操作父窗口: window.parent.document

jquery方法:
在父窗口中操作 选中IFRAME中的所有输入框： $(window.frames["iframeSon"].document).find(”:text”);
在IFRAME中操作 选中父窗口中的所有输入框：$(window.parent.document).find(”:text”);

iframe框架的HTML：<iframe src=”test.html” id=”iframeSon” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>
细心的朋友一下就能理解，原理其实很简单，就是用到了$(DOM对象)转换成jquery对象。

例子：
主页面:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>主页面</title>

    <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">

        function showSubValue(){

            alert( window.frames[0].document.getElementById("zhe").value);

//var v = window.frames[0].document.getElementByIdx_x("subdiv1").innerHTML;

//alert(v);

//   http://hi.baidu.com/bigideaer/blog/item/780337e6af39933d2df534ff.html

           // var o = $(window.frames[0].document).find(":div#subdiv1");

           // alert(o.html());

        }

    </script>

</head>

<body>

<div id="mainDiv">主页面测试数据</div>

<input type="button" value="查看子页面数据" onclick="showSubValue();"/>

<iframe src="zi.html" width="300" height="300"></iframe>

</body>

</html>

子页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>

    <title>子页面</title>

    <script type="text/javascript">

        function showMainValue(){

//dom方式

var v = window.parent.document.getElementById("mainDiv").innerHTML;

alert(v);

window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据";

//jquery方式

//            var o = $(window.parent.document).find(":div#mainDiv");

  //          alert(o.html());

        }

    </script>

</head>

<body>

<div id="subdiv1" >子页面测试数据</div>

<input type="button" id="zhe" value="显示父页面数据" onclick="showMainValue();"/>

</body>

</html>

[HTML]HTML框架IFrame下利用JS在主页面和子页面间传值的更多相关文章

  1. mui框架如何实现页面间传值

    mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...

  2. MUI框架-02-注意事项-适用场景-实现页面间传值

    MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有 ...

  3. js父页面和子页面之间传值

    今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...

  4. iframe中父页面与子页面的传值方法

    涉及到iframe传值的情况有这么几种:(1)父页面给iframe中的子页面传值(2)子页面调用父页面中的函数(3)iframe中的子页面给父页面传值(4)兄弟iframe之间的传值 下面来逐一看一下 ...

  5. JS页面间传值

    一:JavaScript静态页面值传递之URL篇 能过URL进行传值.把要传递的信息接在URL上. 例子: 参数传出页面Post.htm—>   <input type="tex ...

  6. (转)JS页面间传值

    一:JavaScript静态页面值传递之URL篇 能过URL进行传值.把要传递的信息接在URL上. 例子: 参数传出页面Post.htm—> <input type="text& ...

  7. web 页面间传值 js 封装方法

    用法 var id = getParam("id"); function getParam(strKey) { var url=document.URL; //var url=&q ...

  8. Flex中利用事件机制进行主程序与子窗体间参数传递

    在开发具有子窗体,或者itemrenderer的应用时,常常涉及到子窗体向父窗体传递参数或者从itemrenderer内的控件向外部的主程序传递参数的需求.这些都可以通过事件机制这一统一方法加以解决. ...

  9. 利用JS脚本通过getAttribute（）和setAttribute（）等对CSS样式进行操作

    HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...

随机推荐

  1. QString 和 TCHAR 的相互转换

    参考资料: http://www.cnblogs.com/fuyanwen/p/3200536.htmlhttp://www.cnblogs.com/wendao/archive/2012/07/27 ...

  2. iOS调用系统功能发邮件

    使用MFMailComposeViewController发送邮件 1.项目需要导入框架:MessageUI.framework 2.使用的Controller的.h文件中添加代理 MFMailCom ...

  3. App上架审核指南翻译

    App Store Review Guidelines APP审核指南:https://developer.apple.com/app-store/review/guidelines/ 本文是自主翻译 ...

  4. Orchard学习系列-----如何运行的

    感慨:当接触到微软这套程序时,代码实在是太好了,好的几乎都读不懂.很久之前就对这个套开源程序特别感兴趣,但读不明白也让人郁闷. 背景(Orchard官网): 可组装系统的CMS系统,OrChard在运 ...

  5. M面经Prepare: Delete Words Starting With One Character

    给定一个char array, 这个array是一个句子,然后给定一个字母,把这个array里面带有这个字母开头的单次删掉,操作是要求in place. 检测   array[i]==' ' & ...

  6. [转] java书籍(给Java程序猿们推荐一些值得一看的好书 + 7本免费的Java电子书和教程 )

    7本免费的Java电子书和教程 1. Thinking in Java (Third Edition) 本书的作者是Bruce Eckel,它一直都是Java最畅销的免费电子书.这本书可以帮助你系统的 ...

  7. Java获取当前内存及硬盘使用情况

    import java.io.File; import java.lang.management.ManagementFactory; import com.sun.management.Operat ...

  8. bzoj4547 小奇的集合

    当序列中最大和次大都是负数的时候,其相加会是一个更小的负数,因此答案为(Σai)+(m1+m2)*k,如果最大是正数次大是负数,那么一直相加直到两个数都为正数,当最大和次大都是正数时,做一下矩阵乘法即 ...

  9. php 迭代器

    迭代器(Iterator)模式,又叫做游标(Cursor)模式.GOF给出的定义为:提供一种方法访问一个容器(container)对象中各个元素,而又不需暴露该对象的内部细节. 百度百科: http: ...

  10. User Managerment 职责不能使用的问题

    1.此职责默认的是没有启用授权的(grant),需要在系统管理员职责下搜索到对应的菜单,进行grant 2.就算授权后,用户还是不能进行操作,需要进行以下设置: 1. Log into the app ...