用JS引用对象window的元素id

Question

我正在使用 template.html 文件来放置我的页眉和菜单栏，并使用 JS 为每个单独的 index.html 文件插入页面内容。我将 template.html 放在我的根文件中，子文件夹包含一个 index.html（将 template.html 作为一个对象拉入）和 script.js。

我需要 index.html 文件来加载 script.js 文件，同时仍然将 script.js 文件应用于 template.html 文件，但不知道如何index.html 对象中的 JS 引用。我以前 seen something done 像这样用于 iframe，但无法让它以相同的方式应用于对象元素。

这是缩短的文件：

template.html

<!-- header & menu html -->
<div>
  <div id="middleLeft"></div>
  <div id="middleRight"></div>
</div>

references/index.html

<object type="text/html" data="../template.html"></object>

references/script.js

jQuery(function ($) {

window.onload = function() {
  $('#middleRight').innerHTML = rightText;
  $('#middleLeft').innerHTML = leftText;
}

var leftText = "<p>left text</p>";
var rightText = "<p>right text</p>";

照原样，script.js 只有在 template.html 中加载时才有效，但它需要在 index.html 中加载。有没有办法在 index.html 中加载它，但仍然让它引用 template.html 对象中的元素？感谢您的帮助！

Answer 1

jQuery $() 没有 .innerHTML 方法，而是 .html()
为您的 <object> 分配一个 ID，这样您就可以轻松定位它
您应该等待 <object> 加载
您可以访问比使用 contentDocument

这是一个例子

<object id="myObj" type="text/html" data="../template.html"></object>

jQuery(function ($) {

    var leftText = "<p>left text</p>";
    var rightText = "<p>right text</p>";

    $("#myObj").on("load", function() {

        console.dir(this.contentDocument);                 // #document
        console.dir(this.contentDocument.documentElement); // html

        var $doc = $( this.contentDocument );

        $doc.find('#middleRight').html( rightText );
        $doc.find('#middleLeft').html( leftText );

    });

});

用JS引用对象window的元素id

Reference object window's element ids with JS

html

javascript

jquery

reference

html-object