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.
3 answers
solution1
2 ACCPTED 2016-04-27 06:11:05
Try this
jQuery(jQuery('[id="frame"]')[0].contentWindow.document.body).on('click', '*', function() {
console.log("triggered !!");
console.log(this.className); // class of element clicked
});
solution2
0 2016-04-27 06:45:51
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
});
});
solution3
0 2017-03-09 18:07:45
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
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
From inside iframe want to get all iframe class name (each Iframe has a different class name)
Click on element inside iFrame - Cypress
How to get element's id in click event inside an iframe?
Change class of iframe element on click
How to get all elements by class name inside Iframe PEGA
Get element from iframe and click it
Get an element inside an iframe with javascript
How to click a button with no id or name, inside an iframe?
How to get the element inside an iframe element in Javascript?
How to get a sibling element by class name upon button click?
Related Tags