[HTML]HTML框架IFrame下利用JS在主页面和子页面间传值

今天写的程序涉及到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>
时间: 2024-11-05 22:55:57

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

HTML框架IFrame结合JS在主页面和子页面间传值

下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数 仅需 [ parent.window.你的函数 ] 就可以了 DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.document jquery方法:在父窗口中操作 选中IFRAME中的所有输入框: (window.frames["iframeSon"].document).find(”

利用struts进行前端页面间传值及hibernate异常:a different object with the same identifier value was already associated with the session的总结

2017-3-16 我使用SSH框架在做单表CRUD的更新操作时遇到了一个问题,就是页面间该怎么传值?解决该需求时引发了一系列的bug,趁还记得好好总结一番. 前端页面间传值 情景:在我查出所以记录后,点击修改会链接到新的修改页面. 问题:该新页面没有之前的实体信息,该如何传递要修改的实体信息给该页面,例如id? 思路1:利用struts的action来传值. 1 <form action="deleteSerCate.action" method="post"

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

今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取iframe,刚開始用document.getElementById('iframe的ID'),后来查资料才发现这样的方法仅仅是去取出了一个OBJECT,不能操作它的函数方法.后来改成window.iframes["iframe的name"],这样就能够获取子页面的整个DOM,能够操作它的

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

MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有些可能看不懂,这样排是为了可以做 MUI 开发的时候,养成良好的习惯,避免不必要的错误 DOM 结构: 关于 mui 页面的 dom,你需要知道如下规则 固定栏靠前: 所谓的固定栏,也就是带有.mui-bar 属性的节点,都是基于 fixed 定位的元素: 常见组件包括:顶部导航栏(.mui-bar

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

在开发具有子窗体,或者itemrenderer的应用时,常常涉及到子窗体向父窗体传递参数或者从itemrenderer内的控件向外部的主程序传递参数的需求.这些都可以通过事件机制这一统一方法加以解决.在我的应用中有两个需求: 1.左侧的List控件的itemrenderer中包含CheckBox控件,当其状态改变时需要同时改变主程序中的一个数组变量的内容:2.左下方的"新增届次"按钮会弹出一个窗口,窗口中输入届次信息后需要修改数据库中的表,同时表的更改结果要能够在List控件中体现出来

(转)JS页面间传值

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

web 页面间传值 js 封装方法

用法 var id = getParam("id"); function getParam(strKey) { var url=document.URL; //var url="file://wqasdasd/www/1.html?id=2&index=5"; var para=""; if(url.lastIndexOf(strKey)<0) { } else { if(url.lastIndexOf("?")

IE8下IFrame 和子页面的通信

业务中遇到这种场景,我们的业务嵌入别的系统中使用,系统采用Iframe调用我们的业务,在使用过程中主要遇到两个问题: 1.子页面高度发生变化时外部的Iframe高度自适应的问题. 2.子页面不同获取外部scrollTop的问题. 这两个问题其实都可以说是跨域通信的问题. 这两个问题我们采用了不同不同的方案来解决. 1.子页面高度发生变化时外部的Iframe高度自适应的问题. 我们采用在外部系统中增加一个代理页面,这样的话这个代理页面就和外部系统处于同一个域中了,相当于我们在外部系统中安插了一个内

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram