Get element class name inside of iframe by click on it

Question

In briefly , I've an iframe that load form local HTML page and want to access this page's element by click on them ,such as all type of inputs, dropdown list, table and so on.

This is an HTML code that inside of iframe tag:

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

and I load it into asp.net web form:

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

this is script code to access element inside of 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>

I use above code to find iframe body, but can't access to it's element...

I google it but found other thing like find element by class name or find specific element that is not usage for me. How can I do it? thank you so much.

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.

you could try something like this `$('#iframe').contents().find("html").html();` then make it a jquery object and find the class — guradio, Apr 27 '16 at 04:53
@guradio, may i ask you to more explain or refer me to an article about it? — Hamid Talebi, Apr 27 '16 at 05:06
@HamidTalebi Share your `html` code too. Specifically content of `iframe`. — John R, Apr 27 '16 at 05:41
Possible duplicate of [jquery select iframe children](http://stackoverflow.com/questions/2893280/jquery-select-iframe-children) — Mark Schultheiss, Apr 27 '16 at 05:48
In order to process click events if the iframe you may have to include that code in the iframe page content — Mark Schultheiss, Apr 27 '16 at 05:51
@MarkSchultheiss, yes, as i explained , i read it from one of my project folder — Hamid Talebi, Apr 27 '16 at 05:56
@MarkSchultheiss, NO ,IT IS NOT DUPLICATE WITH YOUR REFERENCE ,because in that question, he WANT TO FIND SPECIFIC ELEMENT, but here I WANT TO FIND ANY FORM ELEMENT THAT CLICKED and i don't know what is the class name! — Hamid Talebi, Apr 27 '16 at 05:59

Mark Schultheiss · Accepted Answer · 2016-04-27T06:21:38.730

2

Try this

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

edited Apr 27 '16 at 06:21

answered Apr 27 '16 at 06:11

Mark Schultheiss

32,614
12
69
100

My bad, I had your wrapper id not the frame id from your markup – Mark Schultheiss Apr 27 '16 at 06:21
It worked but i've a problem.this code return THIS element class with PARENT class name.I need a this like "(e.target).classname".do you have an idea? – Hamid Talebi Apr 27 '16 at 06:34
I changed it to worked for me: =====> jQuery(jQuery('[id="frame"]')[0].contentWindow.document.body).on('click', function (e) { var s = ($(e.target).parent().attr('class').split(" ")); – Hamid Talebi Apr 27 '16 at 07:37

score 0 · Answer 2 · answered Apr 27 '16 at 06:45

0

You can try this way.

$(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
    });
});

answered Apr 27 '16 at 06:45

John R

2,741
2
13
32

thanks @John R, your code have same problem that return all class ,not this! – Hamid Talebi Apr 27 '16 at 06:55
Can you try like this `e.target.className`? – John R Apr 27 '16 at 07:03
I tried it,but it have previews problem.I edit the Mark Schultheiss' solution and it worked fine. thank you so much for your help too. – Hamid Talebi Apr 27 '16 at 07:20
Okay. Can you tell the edit what you made, on the comment section of Mark Schultheiss's solution? – John R Apr 27 '16 at 07:30

score 0 · Answer 3 · answered Mar 09 '17 at 18:07

If anyone is having problems with these solutions, I was able to make it work with John R solution, but instead of using $(document).ready I had to listen to the iframe load.

Like this:

$("#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
   });
});

Get element class name inside of iframe by click on it

3 Answers3