Javascript 在iframe中获取html的元素_Javascript_Jquery

Javascript 在iframe中获取html的元素

javascript jquery

Javascript 在iframe中获取html的元素,javascript,jquery,Javascript,Jquery,如何获取iframe中鼠标所在的元素？以下代码适用于HTML页面，但不适用于iframe> <head> <script type="text/javacsript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> $(document).ready(function ({ $('body').mous

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

<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>


$（文档）.ready（函数）({
$（'body'）.mousemove（函数（e）{
var详细信息=e.target.id；
控制台日志（详细信息）；
});
});

您必须将该代码设置到加载到

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>


//您忘记添加此开始脚本标记
$（文档）.ready（函数）({
//这应该适用于您的主页
$（'body'）.mousemove（函数（e）{
var详细信息=e.target.id；
控制台日志（详细信息）；
});
//这应该适用于您的IFRAME
$（“#iFrame”）.contents（）.find（'body'）.mousemove（函数（e）{
var详细信息=e.target.id；
控制台日志（详细信息）；
});
});

参考资料：

希望有帮助。

您必须将该代码设置到加载到

iframe

中的网页中。这是因为您正在将另一个网页显示到

iframe

中。然后，您的主页和

iframe

都有自己的CSS、JS等。如果您不想将该代码添加到加载到中的网页中e> 如果是帧，则必须使用以下内容访问它：

//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>


//您忘记添加此开始脚本标记
$（文档）.ready（函数）({
//这应该适用于您的主页
$（'body'）.mousemove（函数（e）{
var详细信息=e.target.id；
控制台日志（详细信息）；
});
//这应该适用于您的IFRAME
$（“#iFrame”）.contents（）.find（'body'）.mousemove（函数（e）{
var详细信息=e.target.id；
控制台日志（详细信息）；
});
});

参考资料：

希望有帮助。

但必须可以从外部页面执行此操作？你是说我必须插入鼠标移动事件和jquery？谢谢你的帮助。@Hello World我将更新一个适用于你的示例。添加的示例除了语法错误外，仅当框架来自同一域时才有效，情况并非如此在这个例子中。@FelixKling是这样的。如果它来自同一个域，我建议这样做。如果它是一个外部url，而您不像在这个例子中那样管理它（我认为该url只是一个url示例），显然，您不能将javascript鼠标事件添加到该网页。这就是为什么我将该链接发布到Stackoverflow的原因，如果有人想了解有关访问Iframe和

同源策略的更多信息，那么必须可以从外部页面进行添加。那么您是说我必须插入鼠标移动事件和jquery？谢谢您的帮助lp。@Hello World我将用一个应该适用于您的示例进行更新。添加的示例除了语法错误外，只有当帧来自同一个域时，这才有效，而在示例中不是这样。@FelixKling这是真的。如果它来自同一个域，我建议这样做。如果它是一个外部url，您不能像在示例中那样管理它le（我认为url只是一个url示例），显然，您不能将javascript鼠标事件添加到该网页。这就是为什么如果有人想了解有关访问Iframe和同源策略的更多信息，我会将该链接发布到Stackoverflow。列表中的
标记是否两次都是偶然的？如果Iframe不是来自同一域，您不能这样做。主要安全性如果允许您在不在同一域中的iframe中执行此操作，请在此问题。让我们考虑一个iframe，它加载一个金融网站并被注入，以便将所有凭据重定向到一个神秘的人。讨厌…所以您不能执行此操作，除非您也控制该域（请参阅：同源策略）列表中的
标记两次是偶然的吗？如果iframe不是来自同一个域，则不能。如果允许您在不在同一个域的iframe中执行此操作，则此处存在重大安全问题。让我们考虑一个iframe，它加载一个金融网站并被注入，以便将所有凭据重定向到一个神秘的pe讨厌…所以你不能这么做，除非你也在控制这个域（请参阅：同源策略）