js将iframe中控件的值传到主页面控件中的实现方法

现在来看一下代码的实现，首先来看一个主界面的代码

代码如下:

<html>
    <head>
        <script type="text/javascript">
            function GetData(data)
            {
                alert(data);
                document.getElementById("id1").value=data;
            }
        </script>
    </head>
<body>
    <div>
        <input id="id1" type="text" value="11" />
    </div>
    <div>
        <iframe id="frameid" src="b.html">
        </iframe>
    </div>
</body>
</html>

可以看到在主页面定义一个JavaScript函数实现，将传入的data参数，赋值给id为id1的input 文本控件。

下面来看一个嵌入的b.html页面代码

代码如下:

<script type="text/javascript">
    function OnTest()
    {
        var data=document.getElementById("test").value;
        parent.GetData(data);
    }
</script>
<div>
    <input id="test" type="text" value="将此值传到主页面控件中" />
    <button onclick="OnTest()">test</button>
</div>

嵌入页面中主要通过一个按钮事件，将此页面中一个input文本控件中的值取出，然后通过parent.GetData(data)调用主页面的函数进行操作即可。

这是未点击按钮前的效果，现在点击按钮查看效果。

这样就实现了传值的效果

赞 (0)

相关推荐

  • js中iframe调用父页面的方法

    本文实例讲述了js中iframe调用父页面的方法.分享给大家供大家参考.具体实现方法如下: 子页面调用父页面的方法在js中很容易实现.我们只需要在主页面加个函数,然后在子页面通过window.parent.方法()即可实现了 比如调用a()函数,就写成: 复制代码 代码如下: window.parent.a(); 但是我在chrome浏览器下却发现此方法无效了 复制代码 代码如下: //在父页面中调用该函数 <script> function dey() { var cards_frame=d

  • jsp页面iframe高度自适应的js代码

    以下操作写在body里面,form表单外 <iframe id="agentFrame" name="agentFrame" src="" width="0" height="0" style="display:none;" ></iframe> <script type="text/javascript"> function se

  • iframe子父页面调用js函数示例

    1.iframe子页面调用父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: 复制代码 代码如下: window.parent.a(); 子页面取父页面中的标签中的值,比如该标签的id为"test",则: 复制代码 代码如下: window.parent.document.getElementById("test").value; jQuery方法为: $(window.parent.document).c

  • JS中Iframe之间传值及子页面与父页面应用

    在js中,我们时常用到用iframe做系统框架,在子页面也,父页面之间的值传递是一个问题,下面是js获取父窗体和子窗体的对象js: 1.在iframe子页面中获取父页面的元素: a>window.parent.document这个是获取父页面document中的对象: b>如果要获取父页面js中的方法:window.parent.xxxx():xxxx()为方法: 2.在父页面中获取iframe子页面中的元素: a> 复制代码 代码如下: var child = document.get

  • Jsp中解决session过期跳转到登陆页面并跳出iframe框架的方法

    当session过期后可以用过滤器来设置重定向页面 复制代码 代码如下: public class ActionFilter extends HttpServlet implements Filter {private FilterConfig filterConfig;public void init(FilterConfig config) {this.filterConfig = config;}public void doFilter(ServletRequest servletRequ

  • js防止页面被iframe调用的方法

    本文实例讲述了js防止页面被iframe调用的方法.分享给大家供大家参考.具体实现方法如下: 一.问题描述: 有时候我们发会现自己的网站页面被别人调用并且一模一样,这个其实就是简单的iframe调用了,下面我来给大家介绍js防止页面iframe调用的方法总结吧,有需要的朋友可参考 二.解决方法: 防止自己的网页被人框架: top.location.href 最上层的地址 windows.location.href自己的地址 self指代当前窗口对象,属于window最上层的对象; locatio

  • 禁止iframe页面的所有js脚本如alert及弹出窗口等

    今天做一个小软件遇到一个问题,就是在一个页面里面需要放一个iframe框架来预览网站,可是被预览的这个网站中含有很多js脚本,如弹出窗口,提示框,最可恶的是一直让设为首页和加入收藏,我想应该有办法禁止iframe里面的脚本吧,于是百度了一下,还发现不少新大陆,于是解决了这个问题,记录下来,方便以后查询,也方便大家参考: <iframe src="fillseo.html"></iframe> fillseo.html里面有个js脚本,其中有alert,还有弹出窗

  • 用js+iframe形成页面的一种遮罩效果的具体实现

    用这锻代码 之前请先下载jquery库 复制代码 代码如下: var maskStackCount = 0; function mask(method){ //这里是你想要进行遮罩的窗口,我这里想要遮罩的是一个iframe窗口,也可以用var winObj=$(window) var winObj=window.top.$("body").find("iframe[name='dialognormaliframe']"); if(typeof method == &

  • js iframe网站后台左右收缩型页面脚本

    mobaihuo网站后台免费提供_我们_www.jb51.net .navPoint {COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt} .a2{BACKGROUND-COLOR: A4B6D7;} mobaihuo网站后台免费提供 if(self!=top){top.location=self.location;} function switchSysBar(){ if (switchPoint.innerTe

  • JS是否可以跨文件同时控制多个iframe页面的应用技巧

    有个办法,建议你的有连接的iframe改成include包含的文件,然后记得把文件名改成shtml,或者asp.代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w

  • iframe子页面与父页面在同域或不同域下的js通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html 复制代码 代码如下: <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say()

随机推荐