Question

我已经在几个小时内一直在寻找这个问题的答案，但我似乎无法找到任何有效的解决方案。我使用jquery创建了一个动态对象标签，并将其数据设置到我网站上的另一个页面。我将对象标记附加到div，将div添加到页面正文。我想要做的是访问我设置为对象标记数据的页面的html，以监视该页面上的更改并根据这些更改更新当前页面。在html中定义object标签时，我可以使用object标签的contentDocument属性访问其内容，但在动态生成标签时，contentDocument是未定义的。我也尝试过使用jquery的内容功能但它返回一个长度为0的对象。这基本上是我尝试过的：

这是我的页面test.php的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js">
</script>
<div id="fblogin">
  click me</div>
<script>
$("#fblogin").click(function()
{
        console.log('fb initiated');
        statusChangeCallback(response);

});
</script>
<script>
  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    if (response.status === 'connected') {
      testAPI();
    } else if (response.status === 'not_authorized') {
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    } else {
      document.getElementById('status').innerHTML = 'Please log ' +
        'into Facebook.';
    }
  }
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }
  window.fbAsyncInit = function() {
  FB.init({
    appId      : 'myappid',
    cookie     : true, 
    xfbml      : true, 
    version    : 'v2.2'
  }); 
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
  };
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
  function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }
</script>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>

这是对象数据test.html页面的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript">
        function test()
        {
            var parentDiv = document.createElement("div");
            $(parentDiv).addClass("parentDiv");
            var object = $("<object>");
            $(object).attr("id","objectId");

            $(parentDiv).append(object);

            $("body").append(parentDiv);
            $(object).attr("data","test2.html");
            $(object).addClass("object");

            // These give errors
            var content = object.contentDocument;
            alert(content.getElementById("div"));
            var content = $(object).contents();
            alert(content.length());

            /* THIS WORKS IF object defined as a tag in HTML body

            var content = document.getElementById("objectId").contentDocument;
            alert(content.getElementById("div").innerHTML);
            */
        }
    </script>   
</head>
<body onload="test()">
<!-- <object id="objectId" data="test2.html"></object> -->
</body>
</html>

非常感谢任何帮助。谢谢。

Answer 1

此时，它是一个jQuery对象。所以你需要定义它：

// Replace it like this:
var content = document.getElementById("objectId").contentDocument;
var content = object.contentDocument;
alert(content.getElementById("div"));
var content = $(object).contents();
alert(content.length());

或者您也可以使用：

// Replace it like this:
var content = $("#objectId").get(0).contentDocument;
var content = object.contentDocument;
alert(content.getElementById("div"));
var content = $(object).contents();
alert(content.length());

Answer 2

我认为你混淆了许多HTML / Javascript概念。我已经纠正了你的代码，至少没有错误：

var parentDiv = document.createElement("div");
$(parentDiv).addClass("parentDiv");
var object = document.createElement("object");
object.setAttribute("id", "objectId");
object.innerHTML = "Hello, Earth!";

$(parentDiv).append(object);

$("body").append(parentDiv);
object.setAttribute("data", "test2.html");
$(object).addClass("object");

var content = document.getElementById("objectId");
alert(content.innerHTML);

jQuery'$'函数，与'jQuery' function, which is an element selector相同，不是元素创建者。此代码var object = $("<object>")将无效，因为页面上没有CSS选择器<object>定位的对象。我改为将此位改为document.createElement("object")。
由于object变量现在是一个DOM元素，我选择使用.setAttribute函数，这是一个本机DOM函数。
$("body").append(parentDiv)会将parentDiv（及其子object）DOM元素正确添加到body元素的末尾。这允许$(object).addClass("object")正常运行。
contentDocument属性仅供iFrame element使用。我已将属性更改为innerHTML。警报框正确显示“Hello，Earth！”这是object元素的内容。

Working JSFiddle demo here.

如何在jquery中访问动态创建的对象标签的内容？

2 个答案: