包括 html 中的 html 與 jquery 負載不工作

Question

我是 web dev 的新手，所以我覺得我錯過了一些簡單的東西。 我真的只需要有人指出我錯過了什么嗎？

我正在嘗試使用 jquery load() ZC1C4145268E1798 將本地 html 文件包含到另一個 html 文件中。 我遵循了其他stackoverflow 帖子的一些建議。 看起來它應該非常簡單並且工作正常，但它不起作用。 我確實將 jquery 源添加到頭部，並確保我插入主體的部分包含正確的 div id。 我不需要插入本地 html 的特定部分，只需插入整個內容即可。 那 html 只是文本，只包含<p>標簽和類似的東西。

這是代碼：

<html>
<head>
    <meta charset="utf-8" />
    <title>letters on the road</title>
    <link rel="stylesheet" type="text/css" 
    href="../assets/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script> 
    $(function(){
        $("#includedContent").load("text-012518.html"); 
    });
    </script> 
</head>
<body style="font-family:Andale Mono Regular">
    <div id="includedContent"></div>
    <a href="../index_v2.html">home</a>
</body>
</html>

我覺得 jquery 負載似乎是最干凈的選擇。 我確實嘗試過使用 object 標簽，但它會將文本放在 window 角落的一個微小的可滾動框中。 我對 css 不夠熟悉來修復它，所以仍然希望 jquery 負載能夠正常工作。

我上面的代碼沒有拋出錯誤，它根本不包含來自外部 html 的任何內容。 （外部 html 中的文本確實顯示為 object 所以我認為外部 html 本身沒有問題。 $(function(){}); 包裝器，它也不起作用。

頁面上顯示的內容

Answer 1

大多數堆棧溢出解決方案（答案 1 、答案 2等等）都不起作用。 由於 CORS 問題，使用Jquery.load()或XMLHttpRequest實現的解決方案失敗（至少在 chrome 上）。 解決方法是通過添加--disable-web-security標志或使用CORS chrome extension來禁用安全性，這兩者都只適用於測試而不適用於生產應用程序。

Access to XMLHttpRequest at 'file:///.../text.html' from origin 'null' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

這兩種方法有效 -

使用<object>標簽 -

<object data="test.html"></object>

使用iframe標簽 -

<iframe src = "test.html" height="80px" width="500px" >

我的方法是使用 Jquery/vanila javascript 使用object標簽加載 html。 將script標簽添加到頁面底部。 尋找更多答案。

<script>
document.getElementById("includedContent").innerHTML='<object data="text.html"></object>';
</script>

包括 html 中的 html 與 jquery 負載不工作

問題描述

1 個解決方案

解決方案1
1 已采納 2020-05-24 03:43:05

包括 html 中的 html 與 jquery 負載不工作

問題描述

1 個解決方案

解決方案1 1 已采納 2020-05-24 03:43:05

解決方案1
1 已采納 2020-05-24 03:43:05