jQuery子页面调用父页面元素

本文介绍了一种在子页面中操作父页面元素的技术方案,特别是在使用<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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值