Question

我有一个包含textarea的父页面和一个打开子窗口的链接。子窗口有另一个textarea和一个按钮。用户在子窗口的textarea中输入一些文本并单击该按钮，javascript被触发，用父窗口中的textarea的内容更新子窗口的textarea的内容并关闭子窗口。

我目前正在使用javascript进行此操作并且工作正常，但由于我们很快将转向jQuery，如何使用jQuery实现相同目标。

page1.html
----------

<script type="text/javascript">
    function newwin() {
        window.open('page2.html','','width=600');
    }
</script>
<body> 
    <textarea id='t1'>
    <a href="javascript:void(0)" onclick="newwin();">Click here</a> 

</body>


page2.html
----------
<script type="text/javascript">
    function updateparent() {
        window.opener.document.getElementById('t1').value = document.getElementById('t2').value;
        window.close();
    }
</script>
<body> 
    <textarea id='t2'>
    <input type="submit" onclick="updateparent();"> 
</body>

Answer 1

有趣的问题。

正如Domonic Roger所说，如果它正在工作，那么你可能想要离开它。

对我来说问题不是“这个代码片段的JQuery代码是什么？”，但是如何使用jQuery来实现相同的解决方案。

有时它不仅仅是直接代码替换的简单情况。请采取以下措施：

function updateparent() { 
    window.opener.document.getElementById('t1').value = document.getElementById('t2').value; 
    window.close(); 
}

现在，jQuery代码可能是这样的：

function updateparent() { 
    window.opener.$("#t1").val($("#t2").val());
    window.close(); 
}

但是，我不会这样做。我会使用jQuery UI中提供的pop窗口功能，或者使用一些插件（例如blockui）来获取弹出窗口。

此外，此代码：

<body>  
    <textarea id='t2'> 
    <input type="submit" onclick="updateparent();">  
</body>

在jQuery中，我们鼓励使用事件的后期绑定，因此任何内联JavaScript都会出现：

<body>  
    <textarea id='t2'> 
    <input id="MyInput" type="submit">  
</body>

一旦文件准备好就被束缚：

$(document).ready(function(){
    $("#MyInput").click(updateparent());
});

Answer 2

更“jquery”的方式来做到这一点：

page1.html
----------

<script type="text/javascript">
$(document).ready(function() {

    $("#link1").click(function(){
        window.open('page2.html','','width=600');    
    });
});
</script>
<body> 
    <textarea id='t1'>
    <a id="link1" href="#">Click here</a> 

</body>


page2.html
----------
<script type="text/javascript">
$(document).ready(function() {
    $("#link1").click(function(){
        window.opener.jQuery("#t1").val($("#t2").val());    
        window.close();
    });

});
</script>
<body> 
    <textarea id='t2'>
    <input type="submit" id="link2"> 
</body>

这个片段的JQuery代码是什么？

2 个答案: