通过单击获取 iframe 内的元素类名称答案

【问题标题】：Get element class name inside of iframe by click on it通过单击获取 iframe 内的元素类名称
【发布时间】：2017-03-10 02:07:45
【问题描述】：

简而言之，我有一个iframe，它从本地HTML页面加载并希望访问该页面的元素by click on them，例如all type of inputs、dropdown list、table等。

这是 iframe 标签内的 HTML 代码：

<!DOCTYPE html>
<html id="bootbody">
    <head>
        <title>test2</title>
        <link href='bootstrap.min.css' type='text/css' rel='stylesheet' />
        <style>
            @media only screen and (max-width: 767px) and (min-width: 0) {
            .panel {
            height: auto !important;
            }
            }
        </style>
    </head>
    <body >
        <div id="testttt" class='container text-right'>
            <div class='row'>
                <div class='panel panel-default pull-right col-xs-12 col-sm-12' style='height:605px' id='16'>
                    <div class='panel-heading text-right row'>گروه 1</div>
                    <div class='panel-body'>
                        <div class='row'>
                            <div class='col-xs-12 pull-right col-sm-6' style='height:px' id='G1'>
                                <div class='row'>
                                    <div class='panel panel-default pull-right col-xs-12 col-sm-12' style='height:200px' id='12'>
                                        <div class='panel-heading text-right row'>گروه 2</div>
                                        <div class='panel-body'>
                                            <div class='row'>
                                                <div class='col-xs-12 pull-right col-sm-12' style='height:px' id='G1'>
                                                    <div class='row'>
                                                        <div class='col-xs-12 col-sm-6 pull-right  text-right'>
                                                            <div class='row'>
                                                                <div class='col-xs-12 col-sm-6 pull-right'><span>تکست 1</span></div>
                                                                <div class='col-xs-12 col-sm-6'><input id='layout2' type='text' class='form-control form-control-sm' /></div>
                                                            </div>
                                                        </div>
                                                        <div class='col-xs-12 col-sm-6 pull-right  text-right'>
                                                            <div class='row'>
                                                                <div class='col-xs-12 col-sm-6 pull-right'><span>عنوان</span></div>
                                                                <div class='col-xs-12 col-sm-6'><input id='layout17' type='text' class='form-control form-control-sm' /></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='col-xs-12 col-sm-12 pull-right text-right'>
                                                    <div class='row'>
                                                        <div class='col-xs-12 col-sm-6 pull-right'><span>تکست 2</span></div>
                                                        <div class='col-xs-12 col-sm-6'><input id='layout3' class='form-control form-control-sm' type='text' /></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class='panel panel-default pull-right col-xs-12 col-sm-12' style='height:200px' id='13'>
                                        <div class='panel-heading text-right row'>گروه 3</div>
                                        <div class='panel-body'>
                                            <div class='row'>
                                                <div class='col-xs-12 col-sm-12 pull-right text-right'><span>چک باکس 1</span><input id='layout7' type='checkbox'></input></div>
                                                <div class='col-xs-12 col-sm-12 pull-right text-right'><span>چک باکس 2</span><input id='layout8' type='checkbox'></input></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='col-xs-12 pull-right col-sm-6' style='height:NaNpx' id='G1'>
                                <div class='row'>
                                    <div class='panel panel-default pull-right col-xs-12 col-sm-12' style='height:200px' id='3'>
                                        <div class='panel-heading text-right row'>گروه</div>
                                        <div class='panel-body'>
                                            <div class='row'>
                                                <div class='col-xs-12 col-sm-12'>
                                                    <div class='row'>
                                                        <div class='col-xs-12 col-sm-6 pull-right'><span>کومبو1</span></div>
                                                        <div class='col-xs-12 col-sm-6'><select id='layout11' class='form-control form-control-sm'></select></div>
                                                    </div>
                                                </div>
                                                <div class='col-xs-12 col-sm-12'><button style='height:30px;width:150px' id='btnUpdate_2' class='btn btn-default text-center'>ذخیره 2</button></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class='col-xs-12 col-sm-12 pull-right text-right'>
                                        <div class='row'>
                                            <div class='col-xs-12 col-sm-6 pull-right'><span>تکست 3</span></div>
                                            <div class='col-xs-12 col-sm-6'><input id='layout12' class='form-control form-control-sm' type='text' /></div>
                                        </div>
                                    </div>
                                    <div class='col-xs-12 col-sm-12'><button style='height:30px;width:150px' id='btnUpdate_1' class='btn btn-default text-center'>ذخیره 1</button></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

然后我将它加载到 asp.net 网络表单中：

<div id="frameWrapper">
                    <iframe id="frame" src="../HtmlHolder/TEST2.html">[ممکن است بدلیل تنظیمات پیکر بندی مرورگرتان ،قادر به مشاهده ی نمایشگر موبایل نباشید.لطفا مرورگر خود را تغییر دهید.]
                    </iframe>
                </div>

这是访问 iframe 内元素的脚本代码：

<script>
        $(document).ready(function () {
            var frm = $("#frame").get(0);
            var doc = (frm.contentDocument ? frm.contentDocument : frm.contentWindow.document);//here is your document object
            var bdy = doc.body;
            alert(bdy);

        });
    </script>

我使用上面的代码查找 iframe 正文，但无法访问它的元素...

我用谷歌搜索，但发现了 find element by class name 或 specific element 之类的其他东西，这对我来说不适用。我该怎么做？非常感谢。

NOTE: I read an HTML code from DB and then upload it into a folder on my host and then view it in ifram tag.

【问题讨论】：

贴出你试过的代码？
你可以尝试类似$('#iframe').contents().find("html").html(); 然后将其设为 jquery 对象并找到类
@JohnR，问题已更新
@guradio，我可以请您进一步解释或参考我的文章吗？
@HamidTalebi 也分享您的html 代码。具体内容为iframe。

标签： javascript jquery html iframe

【解决方案1】：

试试这个

 jQuery(jQuery('[id="frame"]')[0].contentWindow.document.body).on('click', '*', function() {
   console.log("triggered !!");
   console.log(this.className); // class of element clicked
 });

【讨论】：

我的错，我有你的包装 id 而不是你标记中的框架 id
它有效，但我有一个问题。此代码返回带有父类名称的这个元素类。我需要一个类似“（e.target）.classname”的这个。你有什么想法吗？
我把它改成对我有用：=====> jQuery(jQuery('[id="frame"]')[0].contentWindow.document.body).on(' click', function (e) { var s = ($(e.target).parent().attr('class').split(" "));

【解决方案2】：

你可以试试这个方法。

$(document).ready(function () {
    var frm = $("#frame").get(0);
    var doc = (frm.contentDocument ? frm.contentDocument : frm.contentWindow.document); //here is your document object
    var bdy = doc.body;
    $(bdy).on("click", "*", function (e) {
        console.log($(e.target).attr("class"));//To get class name
    });
});

【讨论】：

感谢@John R，你的代码有同样的问题，返回所有类，不是这个！
你可以试试这样e.target.className吗？
我试过了，但它有预览问题。我编辑了 Mark Schultheiss 的解决方案，效果很好。也非常感谢您的帮助。
好的。您能否在 Mark Schultheiss 解决方案的评论部分告诉编辑您所做的编辑？

【解决方案3】：

如果有人在使用这些解决方案时遇到问题，我可以使用 John R 解决方案使其工作，但不是使用 $(document).ready 我必须听 iframe 加载。

像这样：

$("#frame").on('load', function(){
   var frm = $("#frame").get(0);
   var doc = (frm.contentDocument ? frm.contentDocument : frm.contentWindow.document); //here is your document object
   var bdy = doc.body;

   $(bdy).on("click", "*", function (e) {
       console.log($(e.target).attr("class"));//To get class name
   });
});

【讨论】：