javascript - 使用 javascript 更改 HTML 对象的 innerHTML

Question

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

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

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

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

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

Answer 1

对象的innerHTML是后备内容。

如果不支持对象正在加载的外部资源，则将显示它。

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

一旦你意识到你正在处理一个框架，你就可以找到大量关于如何访问内容的信息。

Answer 2

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

Answer 3

你问“如何使用 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.");