我想获得插入到 iframe 中的远程 url 网页的唯一 ID,它在所有其他浏览器中对本地文件(例如 aboutus.html(相同域))工作正常,但 Chrome 在任何浏览器中都不能用于不同域的远程 url例如http://www.shopping.com
主页.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn_show").click(function(){
if($("#txt_url").val() == "") {
alert("Enter URL");
$("#txt_url").focus();
}
else
{
var curUrl = $("#txt_url").val();
$('#myframe').attr('src',$("#txt_url").val());
windows.frames['#myframe'].location.reload();
}
});
$('#btn-clear').click(function(){
var htmlTxt = document.getElementById("unique_sel_textbox");
$(htmlTxt).val('');
});
$("#btn-inspect").click(function(){
var iframeDoc = document.getElementById('myframe').contentWindow;
$(iframeDoc).mouseover(function(event){
$(event.target).css("outline","dashed 1px #000"); //addClass("set_outline");
}).mouseout(function(event){
$(event.target).css("outline",""); //removeClass("set_outline");
}).click(function(event){
$(event.target).css("border","0.1em solid #f00"); //addClass("outline-selected");
var uniqSel=""; var curId=""; var curCls=""; var pasteCls="";
var pastePath = "";
var html_txt_Id = document.getElementById('unique_sel_textbox');
/*if(((event.target).id) && ((event.target).className)){
var mergIdCls = '#' + ((event.target).id) + '.' + ((event.target).className);
alert(mergIdCls);
}
else */
if((event.target).id){
if(((event.target).id) == 'undefined')
curId="";
else
{
curId = '#' + ((event.target).id);
html_txt_Id.value += " " + curId;
}
}
else
if((event.target).className){
if(((event.target).className) == 'undefined')
curCls = "";
else {
var nodName = ((event.target).nodeName).toLowerCase();
curCls = '.' + ((event.target).className);
html_txt_Id.value += " " + nodName + curCls;
}
}
else {
var curPath = getElementUniqueId(event.target);
html_txt_Id.value += curPath;
}
});
$( "#btn-inspect").unbind("click");
});
});
//get Dom Path of selected element
function getElementUniqueId(element){
return $(element).parent().andSelf().map(function(){
var $this = $(this);
var tagName = this.nodeName;
if($this.siblings(tagName).length >= 0){
tagName += ":nth-child(" + ($(this).prevAll(tagName).length + 1) + ")";
}
return tagName;
}).get().join(" > ").toLowerCase();
}
</script>
</head>
<body>
<div class="main-wrap">
<div class="header" style="text-align:center; height:50px;">
<h2>
DOM UNIQUE ID
</h2>
</div>
<div class="main-content">
<div class="left-panel" style="width:250px; float:left; margin:10px; text-align:center;">
<div class="enter-url">
<form id="frm-url" style="border:1px solid #ccc; border-radius:4px;">
<br> <br>
<p> Enter URL </p>
<input type="text" id="txt_url" style="width:170px">
<br> <br>
<input type="button" value=" Show " id="btn_show"/>
<br> <br>
</form>
</div>
<br />
<div class="html-element">
<form>
<p> HTML Elementes </p>
<textarea cols="25" rows="10" name="console" id="unique_sel_textbox" readonly="readonly" style="resize:none;"> </textarea>
<br />
<br />
<input type="button" value=" Clear " id="btn-clear";/>
<input type="button" value=" Inspect " id="btn-inspect";/>
</form>
</div>
</div>
<div class="right-panel">
<iframe width="900" editable="true" frameborder="1" height="500" id="myframe" src="aboutUs.html"> </iframe>
<br /> <br />
<p> <b> Please Select and element and Get XPath of Highlighted Element </b>
</p>
</div>
</div>
<div class="footer" style="height:50px;">
</div>
</div>
</body>
</html>
aboutUs.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="Page_Title">Untitled Document</title>
</head>
<body>
<div style="height:150px; border:1px solid #999">
<div style="height:80px; border:1px solid #999; margin:5px;">
<div class="class-child" style="height:50px; margin:5px; border:1px solid #999;"> div - 1 </div>
</div>
</div>
<div style="height:50px; border:1px solid #666">
div - 2
</div>
<div class="class-child" style="height:50px; border:1px solid #333">
div - 3
</div>
<div>
<h3 id="heading - 3"> Heading - 3 </h3>
</div>
<div class="divClassTest" style="height:50px; margin:5px; border:1px solid #333" >
Testing Div class
</div>
</body>
</html>
如果我在 iframe src="http://www.w3schools.com/" 中使用远程 url 它不起作用
如果有人知道,请帮助我如何解决这个问题/指导我必须使用哪种技术。
蒂莫西