当一个页面使用了iframe作为嵌套时，如何想要将父页面的数据传给iframe子页面，那iframe所指向的呢个子页面是怎么获取呢，又或者子页面的数据要给父页面使用，那么父页面又如何获取子页面的数据呢？下面根据这种情况作了一个简单的demo案例：

父页面是parentPage.html，子页面是childPage.html。

1、情况一：父页面获取子页面传入的数据（子页面给父页面传值）

父页面：

//获取子页面传入的数据

 function GetChildValue(obj){

   document.getElementById('texts').innerText = obj;

 }

子页面：

//给父页面传数据

var txt = '我是子界面主动传值给父界面的数值';

parent.GetChildValue(txt); //GetValue是父界面的Js 方法

2、情况二：子页面获取父页面的数据（父页面给子页面传值）

父页面：

//给子页面传入数据

function toChildValue(){

    var txt = '这是父页面给子页面的数据';

    return txt;

}

子页面：

//获取父页面传来的数据

var getParentVule = window.parent.toChildValue();

console.log(getParentVule)

具体传值的数据根据自己的项目要求修改，下面放上两个页面的完整代码：

父页面parentPage.htm

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>父页面</title>

        <style type="text/css">

            .box{

                width: 600px;

                height: 400px;

                margin: 10px auto;

            }

            h3{

                font-size: 16px;

            }

            .cont{

                width: 100%;

            }

            .cont h4{

                font-size: 14px;

            }

            .cont #texts{

                width: 100%;

                line-height: 22px;

                font-size: 13px;

                color: #2E2D3C;

            }

            iframe{

                /*只是隐藏，但任然保留DOM结构*/

                visibility: hidden;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <h3>这是父页面</h3>

            <div class="cont">

                <h4>这是从子页面传入的数据：</h4>

                <div id="texts"></div>

                <iframe src="childPage.html" width="1px" height="1px" class="myIframe" name="myIframe"></iframe>

            </div>

        </div>

        <script type="text/javascript">

            //获取子页面传入的数据

            function GetChildValue(obj){

                document.getElementById('texts').innerText = obj;

            }

            //给子页面传入数据

            function toChildValue(){

                var txt = '这是父页面给子页面的数据';

                return txt;

            }

        </script>

    </body>

</html>

　子页面childPage.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>子页面</title>

        <style type="text/css">

            .box{

                width: 600px;

                height: 400px;

                margin: 10px auto;

            }

            h3{

                font-size: 16px;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <h3>这是子页面</h3>

        </div>

        <script type="text/javascript">

            //给父页面传数据

            var txt = '我是子界面主动传值给父界面的数值';

            parent.GetChildValue(txt); //GetValue是父界面的Js 方法

            //获取父页面传来的数据

            var getParentVule = window.parent.toChildValue();

            console.log(getParentVule)

        </script>

    </body>

</html>

关于使用iframe的父子页面进行简单的相互传值的更多相关文章

  1. iframe之父子页面通信

    iframe之父子页面通信 1.获取 子页面 的 window 对象  在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...

  2. 六）iframe 及父子页面之间获取元素、方法调用

    http://www.w3school.com.cn/tags/tag_iframe.asp father.html <!DOCTYPE html> <html> <he ...

  3. iframe父子页面之间相互调用元素和函数

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. js控制父子页面传值（iframe和window.open）

    在html中,window对象代表浏览器中一个打开的窗口,就像我们C/S中做窗体一样,在该页的window对象就是new了一个新的窗体对象. 就像做C/S开发一样,浏览器是一个软件,每一个网页都是它n ...

  5. iframe 自适应高度、父子页面传值、回调

    总结一下最近用iframe遇到的问题与解决办法: 结构:主页面main.html,里面套用iframe.iframe不能出现滚动条,自适应子页面高度.内容多了滚动条是main.html页面的. 1.  ...

  6. 页面嵌入iframe关于父子传参调用

    1.首先来说一下iframe是干什么用的 IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME).iframe元素会创建包含另外一个文档的内联框架(即行内框架),通俗点说就是在一 ...

  7. iframe父子页面通信

    一.同域下父子页面的通信 1.父页面调用子iframe页面 (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器 ...

  8. window.postMessage 在iframe父子页面数据传输

    介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage window.postMessage 发送方 接收方 示例 ...

  9. 父子页面之间元素相互操作(iframe子页面)

    js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...

随机推荐

  1. Shoi2017试题泛做

    一口气做完六个省的省选(误) Day1 [Shoi2017]期末考试 枚举最大的天数,然后代价贪心地O(1)计算. #include <cstdio> #include <algor ...

  2. Spring Boot教程（十五）使用Intellij中的Spring Initializr来快速构建Spring Boot/Cloud工程

    在之前的所有Spring Boot和Spring Cloud相关博文中,都会涉及Spring Boot工程的创建.而创建的方式多种多样,我们可以通过Maven来手工构建或是通过脚手架等方式快速搭建,也 ...

  3. Maven聚合和继承

    一.建立以pom为packaging的项目为,然后再以这一个项目为parent project来聚合其他子项目         新建立一个以pom的项目 改写pom文件,依赖web-common,这样 ...

  4. 2、Shiro的认证

    Shiro的认证流程大体可以参考下面这幅图: 但是没有接触过shiro的同学看到上面的图片也不明白,下面我们来在代码中尝试体验Shiro的认证过程: 1.新建一个SpringBoot项目项目结构如下: ...

  5. 【python】将json串写入文件,并以json格式读取出来

    写json--json.dumps 代码: import json #要写入文件的json串(dict格式) result ={', 'https://appapi.xxxx.com/appapi/b ...

  6. Java多线程学习——synchronized锁机制

    Java在多线程中使用同步锁机制时,一定要注意锁对对象,下面的例子就是没锁对对象(每个线程使用一个被锁住的对象时,得先看该对象的被锁住部分是否有人在使用) 例子:两个人操作同一个银行账户,丈夫在ATM ...

  7. 【Qt开发】如何将内存图像数据封装成QImage V1

    如何将内存图像数据封装成QImage 当采用Qt开发相机数据采集软件时,势必会遇到采集内存图像并进行处理(如缩放.旋转)操作.如果能够将内存图像数据封装成QImage,则可以利用QImage强大的图像 ...

  8. linux/linux学习笔记-Shell基础(mooc)

    一.shell概述 shell根据ascII表,将命令翻译为0101...传给内核执行. 内核->shell翻译为命令->用户(操作的界面就是shell,shell=翻译官) linux标 ...

  9. Java实验报告(一)

    1.水仙花数 public class test1{ public static void main(String[] args){ for(int num=100;num<1000;num++ ...

  10. JDK安装中配置Path无效解决办法

    1. 问题 在安装jdk后,配置完环境变量,然后在控制台输入java -version出现与安装版本不一致的版本,如安装1.8后version仍显示1.7,即:修改环境变量没有生效且原先存在安装过的J ...