使用 javascript 更改 HTML object 的 innerHTML

Question

我正在將外部頁面加載到 HTML object 中：

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

現在我想修改object的來源。 但我不知道如何使用 jQuery 訪問myPage.html的任何元素。 例如：

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

沒有效果。 如何修改注入的 HTML object 中的元素？

Answer 1

object 的innerHTML是后備內容。

不支持object加載的外部資源時顯示。

將 HTML 文檔的 URL 分配給data有效地將 object 用作<iframe> 。 您可能應該使用 iframe 代替，因為它們在瀏覽器中得到一致支持的時間要長得多。

一旦你意識到你正在處理一個框架，你就可以找到大量關於如何訪問內容的信息。

Answer 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.");

Answer 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