iframe如何触发父元素事件以及父页面控制iframe子页面元素


最近在开发登入窗口中运用到iframe,其中遇到一些小问题拿出来分享一下。

问题:用jquery的$('parent.document').find('#id')来取父框架的元素,取出来的DOM元素也是正确的,在控制台打印出来了,但调用click()方法就是触发不了绑定的函数

1.父页面有一个打开注册事件:

$('#regis').click(function(){
        $('.container').append(regis);
        $('.modal-backdrop').click(function(){
            $(".loginModal,.modal-backdrop").remove();
        });//隐藏
    });//打开注册


2.子页面处理方式:

误区:$(window.parent.document).find('#regis').click();

正确处理方式: $前面加上parent

$('#login_res').on('click',function(){
	parent.$(window.parent.document).find('#regis').click();
});//触发父页面打开注册事件


科普一下:

父页面访问子页面可以用:
$('#iframeID').contents().find('#元素id')


子页面访问父页面:
$(window.parent.document).find(""#元素id");
或者:$("#元素id",window.parent.document);


在HTML5中,页面iframe的内容页面)可以直接通过JavaScript来获取页面(也称为顶层窗口或者包含它的窗口)的元素,但这受限于同源策略。以下是几种常用的方法: 1. **`window.parent` 或 `window.top`**: 这些属性直接引用了iframe所在的窗口。例如: ```javascript var parentElement = window.parent.document.getElementById('parentElementId'); ``` 2. **事件冒泡**: 页面可以监听页面上特定元素事件,然后在回调函数里操作页面元素。比如: ```javascript parentElement.addEventListener('customEvent', function(e) { var elementInParent = e.target; }); ``` 3. **使用`postMessage`** (只在同源的前提下):如前文所述,可以在页面页面发送消息,然后页面响应并获取信息。先在页面设置监听,然后触发: ```javascript parentElement.addEventListener('click', function() { window.frames['childFrameName'].contentWindow.postMessage('getMe', '*'); }); // 在页面的`message`事件处理器中获取元素 window.addEventListener('message', function(e) { if (e.origin !== 'http://parent.com') return; const parentElement = document.getElementById('parentElementId'); // 对parentElement做操作 }); ``` 4. **`document.domain`设置** (仅限于同域名下的页面):对于某些老版本浏览器,设置`document.domain`可以使iframe有更宽泛的权限访问页面元素,但这是不推荐的做法,因为它会牺牲安全性。 请注意,这些方法都有一定的局限性,特别是当涉及到跨域(不同域名)时,因为浏览器的安全策略会更为严格。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昌子玩前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值