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

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

iframe

如何为不同的域url使用iframe访问dom元素,iframe,Iframe,我想获取插入iframe中的远程url网页的唯一id 在除Chrome之外的所有其他浏览器中，本地文件（如aboutus.html（同一域））都可以正常工作它不工作在任何浏览器为远程url的不同领域的eg MainPage.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

我想获取插入iframe中的远程url网页的唯一id 在除Chrome之外的所有其他浏览器中，本地文件（如aboutus.html（同一域））都可以正常工作它不工作在任何浏览器为远程url的不同领域的eg

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>


无标题文件
$（文档）.ready（函数（）{
$（“#btn_显示”）。单击（函数（）{
if（$（“#txt_url”）.val（）=“”）{
警报（“输入URL”）；
$（“#txt_url”）.focus（）；
}
其他的
{
var curUrl=$（“#txt_url”）.val（）；
$（'myframe'）.attr（'src'，$（'txt_url'）.val（））；
windows.frames['#myframe'].location.reload（）；
}
});
$（“#btn清除”）。单击（函数（）{
var htmlText=document.getElementById（“唯一的选择文本框”）；
$（htmlTxt）.val（“”）；
});   
$（“#btn检查”）。单击（函数（）{
var iframeDoc=document.getElementById（'myframe'）.contentWindow；
$（iframeDoc）.mouseover（函数（事件）{
$（event.target）.css（“大纲”，“虚线1px#000”）//addClass（“设置大纲”）；
}).mouseout（函数（事件）{
$（event.target）.css（“outline”，”；//removeClass（“set_outline”）；
})。单击（功能（事件）{
$（event.target）.css（“border”，“0.1em solid#f00”）；//addClass（“选定轮廓”）；
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）；
警报（mergIdCls）；
}
否则*/
if（（event.target.id）{
if（（（event.target.id）=‘未定义’）
“居里”；
其他的
{ 
curId='#'+（（event.target.id）；
html_txt_Id.value+=“”+curId；
} 
}
其他的
if（（event.target.className）{
if（（（event.target）.className）='undefined'）
curCls=“”；
否则{
var nodName=（（event.target.nodeName.toLowerCase（）；
curCls='.+（（event.target.className）；
html_txt_Id.value+=“”+nodName+curCls；
} 
}
否则{
var curPath=getElementUniqueId（event.target）；
html_txt_Id.value+=curPath；
} 
});
$（“#btn检查”）。解除绑定（“单击”）；
}); 
});
//获取所选元素的Dom路径
函数getElementUniqueId（元素）{
返回$（元素）.parent（）和self（）.map（函数（）{
var$this=$（this）；
变量标记名=this.nodeName；
if（$this.sibbines（标记名）.length>=0）{
标记名+=“：第n个子项（“+（$（this）.prevAll（标记名）.length+1）+”）；
}
返回标记名；
}).get（）.join（“>”）.toLowerCase（）；
} 
DOM唯一ID



输入URL








HTML元素







请选择和元素并获取突出显示元素的XPath

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>


无标题文件
分区-1
分区-2
分区-3
标题-3
测试Div类

如果我在iframe src=中使用远程url“http://www.w3schools.com/“它不起作用

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

借

Timothy

请阅读：看起来您只是在使用iframe的

内容窗口

来连接

鼠标盖

事件，并使用

事件.目标

进行样式设置。为什么不直接连接到

iframe

本身，以避免达到同源策略限制？对不起。我不明白你的意思，所以请详细解释你的

mouseover

事件是与这一行连接的：

$（iframeDoc）.mouseover（函数（事件）{

。试着直接将它连接到

#myframe

（iframe本身），而不是内部的

contentWindow

对象：

$（'#myframe'）。mouseover（函数（事件）{

。我想获取外部网页元素。我尝试了$（“#myframe”）.mouseover（函数（事件）{它的目标只是iframe，而不是外部网页元素的内容。请在FireFox中以aboutus.html作为iframe内容进行检查，这样你就会明白我到底想要什么。请帮助我。谢谢。