解决原生js或jQuery 实现父窗口的问题,如window.parent.document.getElementById()

来源:互联网 发布:恒生软件待遇 编辑:程序博客网 时间:2024/05/29 19:26

原文出处:https://sanwen8.cn/p/3826EIa.html

做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>


阅读全文
0 0