Идентификаторы элементов окна ссылочного объекта с помощью JS

Question

Я использую файл template.html для размещения заголовка и строки меню и использую JS для вставки содержимого страницы в отдельные файлы index.html. Я размещаю template.html в моем корневом файле, а во вложенных папках - index.html (который использует template.html как объект) и script.js.

Мне нужен файл index.html для загрузки файла script.js, в то время как файл script.js все еще применяется к файлу template.html, но я не могу понять, как получить ссылку на JS внутри объекта index.html. Я видел что-то вроде этого до-иша для iframes, но не смог заставить его применить то же самое для элементов объекта.

Вот сокращенные файлы:

template.html

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

ссылки /index.html

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

ссылки /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> так что вы можете легко нацелиться на него
• Вам следует подождать <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 );

    });

});