您的位置：首页 > Web前端 > JQuery

window.parent.document解决原生js或jQuery 实现父窗口的问题

2017-03-15 17:39 609 查看
做WEB前端开发的过程中，经常会有这样的需求，用户点击【编辑】按钮，弹出一个对话框，在里边修改相应的值，然后把修改后的值显示在原页面，最后点击保存。

用window.parent.document.getElementById().setAttribute("value","")可以很好的解决这个问题。

源代码如下：

父页面中的代码：

<!doctype html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <meta name="Keywords" content="">

        <meta name="Description" content="">

    </head>

    <body style="height:3000px">

        <input type="text" id="parent">

        <button id="parentBtn">编辑</button>

        <div class="clear" style="width:500px;height:200px;border:1px solid red;position:fixed;top:100px;left:100px;display:none">

            <iframe src="son.html" style="border:none"></iframe>

        </div>

        <button id="content">获取内容值</button>

    </body>

</html>

<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>

<script type="text/javascript">

    $("#parentBtn").click(function(){

        $(".clear").show();

    })

    $("#content").click(function(){

        alert($("#parent").val());

    })

</script>

子页面中的代码：

<!doctype html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <meta name="Keywords" content="">

        <meta name="Description" content="">

    </head>

    <body>

        <input type="text" id="son">

        <button id="sonBtn">确定</button>

    </body>

</html>

<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>

<script type="text/javascript">

    $("#sonBtn").click(function(){

        var $val = $("#son").val();

        $("#parent", window.parent.document).val($val);//jQuery写法给父页面传值



        //window.parent.document.getElementById("parent").setAttribute("value",$val);//原生javascript写法给父页面传值

        $(".clear", window.parent.document).hide();//jQuery写法控制父页面中的某个元素隐藏

        //window.parent.document.getElementsByClassName("clear")[0].style.display = "none";//原生javascript写法控制父页面中的某个元素隐藏

    })

</script>

from:http://www.wtoutiao.com/p/3826EIa.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航