使用 javascript 更改 HTML 对象的 innerHTML答案

【问题标题】：Changing the innerHTML of an HTML object with javascript使用 javascript 更改 HTML 对象的 innerHTML
【发布时间】：2021-01-06 02:19:56
【问题描述】：

我正在将外部页面加载到 HTML 对象中：

var object = document.createElement('object')
object.data = 'myPage.html'
$("#myDiv").html(object)

现在我想修改object的来源。但我不知道如何使用 jQuery 访问myPage.html 的任何元素。例如：

$("#myPageDiv").css('background-color', '#000');

没有效果。如何修改注入的 HTML 对象中的元素？

【问题讨论】：

这能回答你的问题吗？ jQuery CSS() for dynamically created elements
使用常规的iframe 元素而不是object（结果是一样的，除非您可以更好地访问外部文档，前提是它来自与主页相同的域)。
@Teemu 我会使用 iframe，但我正在制作 chrome 扩展，并且在使用 iframe 时它似乎有一些有趣的行为
也许你应该再问一个关于“有趣的行为”的问题......？

标签： javascript html jquery

【解决方案1】：

对象的innerHTML 是后备内容。

对象加载的外部资源不支持时显示。

将 HTML 文档的 URL 分配给 data 有效地将对象用作 <iframe>。您可能应该改用 iframe，因为它们在浏览器中得到一致支持的时间要长得多。

一旦您意识到您正在处理一个框架，您可以find plenty of information 了解如何访问内容。

【讨论】：

我会使用 iframe，但我正在制作 chrome 扩展，并且在使用 iframe 时它似乎有一些有趣的行为

【解决方案2】：

你问“如何使用 jQuery 访问 myPage.html 的任何元素”

var object = document.createElement('object')
object.d = '<div id="x">XXX</div>'
$("#my").html(object.d);
$('#x').text("<b>Some</b> new text.");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my">ddd</div>

试试这个

var object = document.createElement('object')
object.d = '<div id="x">XXX</div>'
$("#my").html(object.d);
$('#x').text("<b>Some</b> new text.");

【讨论】：

对不起，但这似乎不起作用，我不确定它与我给出的示例有何不同

【解决方案3】：

Jquery 的load 方法和css 方法应该可以解决问题。

因此，请试试这个（用于演示目的）：

HTML（例如 main.html）

  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>

<input type=button onclick="javascript:step1();" value="(Step 1) Load HTML">

<div id=myDiv></div>


<input type=button onclick="javascript:step2();" value="(Step 2) Change color">


<script>

function step1()
{
$("#myDiv").load('myPage.html');
}

function step2()
{
$("#myPageDiv").css('background-color', '#000');

}

</script>

对于 myPage.html

This is a test
<br>
<div id=myPageDiv>NEED TO CHANGE BACKGROUND COLOR</div>

您可能会在此处看到完整的 HTML：

http://www.createchhk.com/so_Jan05.html

【讨论】：