jQuery子页面调用父页面元素

最新推荐文章于 2020-09-04 09:53:22 发布

原创最新推荐文章于 2020-09-04 09:53:22 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#子页面调用父页面元素 #jquery获取父页面元素 #window.opener.document

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在子页面中操作父页面元素的技术方案，特别是在使用<a>标签打开子页面的情况下，通过window.opener.document实现了对父页面特定元素的修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做了一个功能，在子页面完成操作后关闭子页面并刷新父页面内容，这种功能以前也做过很多次，但是每次做完都不记录，也使用过几种方法，比如window.open() 打开，然后子页面 window.parent.document来获取父页面元素。但这次是修改别人的代码，他的打开方式是用<a> 标签，这时候用window.parent.document就不好用，可以使用window.opener.document

我写了个小例子， index页面通过a标签打开 test页面，在test页面加载过的过程中调用index页面id=ppp的input标签，替换value值

index.html

<html>
<body>

<div>
    <a href='javascript: window.open("./test.html")' target="_blank">打开test页面</a>  // 这里我也试过直接用url  主要是在a标签内打开的用parent.document都是取不到的
    <input type="text" id="ppp" value="index原值"></input>
</div>

</body>
<script src="./js/vendor/jquery-1.12.0.min.js"></script>
<script>
    $('#ppp').click(function () {
        $(this).val('由test子页面触发的');
    });
</script>
</html>

test.html

<script src="./js/vendor/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#ppp", window.opener.document).click(); //  jquery取父页面元素的方法 并触发点击时间
    });
</script>

后记：工作中应该养成记录和分析的好习惯，这样的功能做过不止一次，但是每次重新做的时候都忘记了很多细节写法，挺浪费时间的。东西很简单，要想提升效率，就应该多记录。