Question

如何在iframe中获取鼠标所在的元素？以下代码适用于HTML页面，但不适用于iframe＆gt;

中的html

<head>
    <script type="text/javacsript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        $(document).ready(function ({
            $('body').mousemove(function (e) {
                var details = e.target.id;
                console.log(details);
            });
         });
    </script>
</head>

<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <iframe src="http://www.w3schools.com" width="800" height="800" id="five"></iframe>
</body>

Answer 1

您必须将该代码设置为您在iframe中加载的网页。那是因为您正在向iframe显示另一个网页。然后，您的主页和您的iframe拥有自己的CSS，JS等。如果您不想将该代码添加到加载到iframe的网页中，您将不得不使用以下内容访问它：

//THIS IS AN EXAMPLE
$("#iFrame").contents().find("#someDiv").removeClass("hidden");

对于您的示例，我建议使用此：

<script type="text/javacsript" src="http://ajax.googleapis.com/ajax/libs/jquery/
    1.9.1/jquery.min.js"></script>

<script> //YOU FORGOT TO ADD THIS OPENING SCRIPT TAG
    $(document).ready(function({
        // THIS SHOULD WORK FOR YOUR MAIN PAGE
        $('body').mousemove(function (e) {
            var details = e.target.id;
            console.log(details);
        });
        // THIS SHOULD WORK FOR YOUR IFRAME
        $("#iFrame").contents().find.('body').mousemove(function (e) {
            var details = e.target.id;
            console.log(details);
        });
    });
</script>

参考： Accessing Iframe

希望它有所帮助。

获取iframe中html的鼠标元素

1 个答案: