Question

我试图创建像浏览器检查器一样工作的页面。基本上我希望能够点击页面元素并获得该元素的X路径。我创建了一个简单的页面，它使用jQuery将另一个页面加载到div中，但我仍然坚持使用内页元素。

这是我的代码：

<html> 
<head>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script> 
        $(function(){
            $("#page").html('<object data="http://mypage.com" />');
        });
    </script> 
</head> 
<body> 
    <div id="bar"></div>
    <div id="page"></div>
</body>

使用$("#page").find("object")选择器我可以访问object，但我还没有找到更深入了解object内部文档元素的方法。有没有办法选择那个内页的元素，或者有更好的方法来做我想做的事情？

Answer 1

＆＃34; .find()方法允许我们在DOM树中搜索这些元素的后代，并从匹配元素构造一个新的jQuery对象。 .find()和.children()方法类似，但后者仅沿DOM树向下移动一个级别。＆＃34;

即，使用find获取与搜索条件匹配的所有元素，并使用子项仅获得直接子项。

Answer 2

您应该能够使用元素的<objects>属性访问内部contentDocument的文档。即：

如果您有类似的东西：

<object data="blob:http://my-domain.com/resource-id: hidden;">
  #document
    <html>        
      <body>
        <embed width="100%" height="100%" name="plugin" id="plugin" src="blob:http://my-domain.com/resource-id" type="application/pdf" internalinstanceid="110">
       </body>
    </html>
  </object>

您可以这样访问embed元素：

$('object').contentDocument.body.children[0]

Answer 3

我只是尝试同样的事情，但当我到达对象内的文档时，如果协议，域和端口不匹配，您将收到安全错误：

＆＃34; Uncaught SecurityError：无法阅读＆＃39; contentDocument＆＃39;属性来自＆＃39; HTMLObjectElement＆＃39;：使用原点阻止了一个框架＆＃34; http://localhost:49362＆＃34;从访问原始框架＆＃34; HTTP：//*******.com" ;.协议，域和端口必须匹配。＆＃34;

但是如果您在相同的域，协议和端口内访问，您将可以使用contentDocument访问对象内的html文档：

$(function () {
            $('#exweb').html('<object id="webloader" data="http://*****.com"/>');
        });

 <script>
        $(window).load(function () {           
            var html = document.getElementById('webloader').contentDocument           
        });
    </script>

如何选择对象内的文档元素

3 个答案: