Question

我想获得插入iframe的远程网址的唯一ID 它适用于本地文件，例如所有其他浏览器中的aboutus.html（相同域名），但Chrome 它不能在任何浏览器中用于不同域的远程URL，例如http://www.shopping.com

MainPage.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 =＆＃34; http：//www.w3schools.com/"它无法正常工作

帮助我如何解决这个问题/指导我如果有人知道我必须使用哪种技术。

通过蒂莫西

如何使用iframe访问不同域url的dom元素

0 个答案: