使用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>