如何检测弹窗内加载的无编辑权限同域iframe的点击事件

存在的问题 #

• 你创建的iframe设置了width="0" height="0"，元素完全不可见也无法被点击，自然触发不了绑定的点击事件
• 直接对iframe内的#btn-link绑定事件，若该按钮是iframe加载完成后动态生成的，会出现绑定失败的情况
• 使用$(iDoc).ready监听iframe加载状态的稳定性不如iframe的原生load事件，可能出现iframe内DOM还未完全解析就执行绑定逻辑的情况
• 重复用类选择器查找iframe容易出现选择误差，优先用已经声明的iframe元素变量操作更稳妥

修正后的代码 #

HTML部分

<div class="popup-form">
    <div class="box-form">
        <span class="close-form" id="close-form">x close</span>
        <div id="box-iframe"></div>
    </div>
</div>

<div class="btn-form">click me</div>

JS部分

$('.btn-form').click(function(){ 
    $(".popup-form").fadeIn(function(){
        var url = 'example.html',
        // 创建iframe并设置合理的宽高，保证内部元素可被正常点击
        $iFrame = $('<iframe class="dl-frame" src="' + url + '" width="500" height="400" frameborder="0"></iframe>'),
        iFrameElem = $iFrame.get(0);
        
        // 先绑定load事件再插入DOM，避免加载速度过快漏触发事件
        $iFrame.on('load', function(){
            alert('iframe加载完成');
            var iDoc = iFrameElem.contentDocument || iFrameElem.contentWindow.document;
            // 使用事件委托，把事件绑定到iframe的document上，适配动态生成的按钮
            $(iDoc).on('mousedown mouseup click', '#btn-link', function(){
                alert("iframe内按钮点击已检测");
                localStorage.setItem('buttonClicked', 1);
            });
        });

        // 将iframe插入到容器中
        $('#box-iframe').append($iFrame);
    });
});

验证注意事项 #

• iframe加载完成后，可打开控制台执行$('.dl-frame').contents().find('#btn-link').length，返回值大于0说明目标按钮确实存在
• 同域规则需要严格匹配，协议、域名、端口三者必须完全一致，否则无法正常访问iframe内部DOM
• 同域下localStorage是父子页面共享的，写入完成后可以直接在父页通过localStorage.getItem('buttonClicked')读取到对应值

内容的提问来源于stack exchange，提问作者deew