js中监听iframe点击事件

js中监听iframe点击事件,第1张

在js中,需要监听iframe的点击事件,但是因为浏览器的同源策略,是无法监听到的,只能另辟蹊径去解决它

注意,仅限于pc网站,意思就是必须要有鼠标移入移出iframe的 *** 作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=ISO-8859-1">

<title>Detect IFrame Clicks</title>

<script src="./jquery-3.4.1.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        var currentObj=Object

        var isOverIFrame = false

        function processMouseOut(e) {

            console.log('out iframe',e.target)

            currentObj=e.target

            isOverIFrame = false

            top.focus()

        }

        function processMouseOver(e) {

            // log("IFrame mouse >> OVER << detected.")

            console.log('in iframe',e.target)

            currentObj=e.target

            isOverIFrame = true

        }

        function processIFrameClick(event) {

            if(isOverIFrame) {

                console.log('click iframe',event.target,currentObj)

            }

        }

        function attachOnloadEvent(func, obj) {

            if(typeof window.addEventListener != 'undefined') {

                window.addEventListener('load', func, false)

            } else if (typeof document.addEventListener != 'undefined') {

                document.addEventListener('load', func, false)

            } else if (typeof window.attachEvent != 'undefined') {

                window.attachEvent('onload', func)

            } else {

                if (typeof window.onload == 'function') {

                    var oldonload = onload

                    window.onload = function() {

                        oldonload()

                        func()

                    }

                } else {

                    window.onload = func

                }

            }

        }

        function init() {

            var element = document.getElementsByTagName("iframe")

            for (var i=0 i<element.length i++) {

                element[i].onmouseover = processMouseOver

                element[i].onmouseout = processMouseOut

            }

            if (typeof window.attachEvent != 'undefined') {

                top.attachEvent('onblur', processIFrameClick)

            }

            else if (typeof window.addEventListener != 'undefined') {

                top.addEventListener('blur', processIFrameClick, false)

            }

        }

        attachOnloadEvent(init)

    })

</script>

</head>

<body>

<iframe src="https://www.hao123.com" width="80%" height="600px"></iframe>

<iframe src="https://www.baidu.com" width="80%" height="600px"></iframe>

</form>

</body>

</html>

复制上边整段html,打开console控制台,即可解决这个问题,亲测好用

要给iframe添加click事件,而且iframe不能跨域。。给父页添加的onclick事件点击iframe是不会响应的

window.onload = function () {

var ifrs = document.getElementsByTagName('iframe')

for (var i = 0i <ifrs.lengthi++) {

try {

ifrs[i].contentWindow.document.onclick = (function (ifr) {

return function () {

alert('点击了iframe'+ifr.src)

}

})(ifrs[i])

}

catch (ex) { }

}

}


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11398333.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-15
下一篇2023-05-15

发表评论

登录后才能评论

评论列表(0条)

    保存