使用JQuery在單擊時將html頁面加載到容器中

Question

我試圖使用加載功能將HTML從一個頁面上的html單擊導入，但是單擊按鈕時似乎什么也沒發生。 我該如何解決該問題？

我收到的控制台錯誤是：

jquery.min.js：4 XMLHttpRequest無法加載文件：/// C：/Users/Ian/Google%20Drive/Project%20Georgia/history.html。 跨源請求僅支持以下協議方案：http，數據，chrome，chrome擴展名，https。

這是腳本：

<script>
    $(document).ready(function(){
        $("#btn-history").click(function(){
            $("#displayed-text").load("history.html");
       });
    });
</script>

輸入按鈕：

<input id="btn-history" type="image" src="img/history.gif" alt="Golden Lion" class="menu-icon">

和容器：

<p id="displayed-text">This is where text will show up.</p>

編輯：

了解到無法從C驅動器加載后，我將該頁面上傳到了Google Drive，並如下修改了腳本：

        $("#btn-history").click(function(){
            $("#displayed-text").load("https://drive.google.com/file/d/0B7fJXEIdt8OCT2ozTlNaRktOZm8/view?usp=sharing");
       });

但是，我仍然收到錯誤。

jquery.min.js：4不贊成在主線程上使用同步XMLHttpRequest，因為它會對最終用戶的體驗產生不利影響。 如需更多幫助，請訪問https://xhr.spec.whatwg.org/ 。

發送@ jquery.min.js：4

阿賈克斯@ jquery.min.js：4

r._evalUrl @ jquery.min.js：4

Ja @ jquery.min.js：3

追加@ jquery.min.js：3

（匿名）@ jquery.min.js：3

T @ jquery.min.js：3

html @ jquery.min.js：3

（匿名）@ jquery.min.js：4

我@ jquery.min.js：2

fireWith @ jquery.min.js：2

一個@ jquery.min.js：4

（匿名）@ jquery.min.js：4

jquery.min.js：4 XMLHttpRequest無法加載

文件：/// C：/static/file/client/js/1539922584-projector_viewer__ka.js。 跨源請求僅支持以下協議方案：http，數據，chrome，chrome擴展名，https。

發送@ jquery.min.js：4

阿賈克斯@ jquery.min.js：4

r._evalUrl @ jquery.min.js：4

Ja @ jquery.min.js：3

追加@ jquery.min.js：3

（匿名）@ jquery.min.js：3

T @ jquery.min.js：3

html @ jquery.min.js：3

（匿名）@ jquery.min.js：4

我@ jquery.min.js：2

fireWith @ jquery.min.js：2

一個@ jquery.min.js：4

（匿名）@ jquery.min.js：4

VM644：1未捕獲的參考錯誤：_initProjector未定義

在：1：1

在p（jquery.min.js：2）

在Ja（jquery.min.js：3）

在r.fn.init.append（jquery.min.js：3）

在r.fn.init。 （jquery.min.js：3）

在T（jquery.min.js：3）

在r.fn.init.html（jquery.min.js：3）

在對象。 （jquery.min.js：4）

在我（jquery.min.js：2）

在Object.fireWith [as resolveWith]（jquery.min.js：2）

（匿名）@ VM644：1

p @ jquery.min.js：2

Ja @ jquery.min.js：3

追加@ jquery.min.js：3

（匿名）@ jquery.min.js：3

T @ jquery.min.js：3

html @ jquery.min.js：3

（匿名）@ jquery.min.js：4

我@ jquery.min.js：2

fireWith @ jquery.min.js：2

一個@ jquery.min.js：4

（匿名）@ jquery.min.js：4

jquery.min.js：3 GET文件：/// C：/static/file/client/css/469530624-projector_css_ltr.css net :: ERR_FILE_NOT_FOUND

（匿名）@ jquery.min.js：3

Ja @ jquery.min.js：3

追加@ jquery.min.js：3

（匿名）@ jquery.min.js：3

T @ jquery.min.js：3

html @ jquery.min.js：3

（匿名）@ jquery.min.js：4

我@ jquery.min.js：2

fireWith @ jquery.min.js：2

一個@ jquery.min.js：4

（匿名）@ jquery.min.js：4

cb = gapi.loaded_0：48無法在'DOMWindow'上執行'postMessage'：提供的目標原點（'file：//'）與收件人窗口的原點（'null'）不匹配。

（匿名）@ cb = gapi.loaded_0：48

Answer 1

您是否嘗試過e.preventDefault() ：

<script>
$(document).ready(function(){
    $("#btn-history").click(function(e){
        e.preventDefault();
        $("#displayed-text").load("history.html");
   });
});
</script>