[英]Get element class name inside of iframe by click on it
簡要地說，我有一個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.
嘗試這個
jQuery(jQuery('[id="frame"]')[0].contentWindow.document.body).on('click', '*', function() {
console.log("triggered !!");
console.log(this.className); // class of element clicked
});
您可以嘗試這種方式。
$(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解決方案一起使用，但不必使用$（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
});
});
從iframe內部希望獲取所有iframe類名（每個iframe具有不同的類名）
[英]From inside iframe want to get all iframe class name (each Iframe has a different class name)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.