JQueryを使用して、クリック時にコンテナにHTMLページを読み込む

Question

load関数を使用して、クリックするとあるページから別のページにHTMLをインポートしようとしていますが、ボタンをクリックしても何も起こっていないようです。どのように問題を解決できますか？

私は受け付けており、コンソールにエラーがある：ここでは

jquery.min.js:4 XMLHttpRequest cannot load file:///C:/Users/Ian/Google%20Drive/Project%20Georgia/history.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, 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ドライブにページをアップロードし、次のように私のスクリプトを修正：

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

しかし、まだエラーを受け付けております。

jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/ .

send @ jquery.min.js:4

ajax @ jquery.min.js:4

r._evalUrl @ jquery.min.js:4

Ja @ jquery.min.js:3

append @ jquery.min.js:3

(anonymous) @ jquery.min.js:3

T @ jquery.min.js:3

html @ jquery.min.js:3

(anonymous) @ jquery.min.js:4

i @ jquery.min.js:2

fireWith @ jquery.min.js:2

A @ jquery.min.js:4

(anonymous) @ jquery.min.js:4

jquery.min.js:4 XMLHttpRequest cannot load

file:///C:/static/file/client/js/1539922584-projector_viewer__ka.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

send @ jquery.min.js:4

ajax @ jquery.min.js:4

r._evalUrl @ jquery.min.js:4

Ja @ jquery.min.js:3

append @ jquery.min.js:3

(anonymous) @ jquery.min.js:3

T @ jquery.min.js:3

html @ jquery.min.js:3

(anonymous) @ jquery.min.js:4

i @ jquery.min.js:2

fireWith @ jquery.min.js:2

A @ jquery.min.js:4

(anonymous) @ jquery.min.js:4

VM644:1 Uncaught ReferenceError: _initProjector is not defined

at :1:1

at p (jquery.min.js:2)

at Ja (jquery.min.js:3)

at r.fn.init.append (jquery.min.js:3)

at r.fn.init. (jquery.min.js:3)

at T (jquery.min.js:3)

at r.fn.init.html (jquery.min.js:3)

at Object. (jquery.min.js:4)

at i (jquery.min.js:2)

at Object.fireWith [as resolveWith] (jquery.min.js:2)

(anonymous) @ VM644:1

p @ jquery.min.js:2

Ja @ jquery.min.js:3

append @ jquery.min.js:3

(anonymous) @ jquery.min.js:3

T @ jquery.min.js:3

html @ jquery.min.js:3

(anonymous) @ jquery.min.js:4

i @ jquery.min.js:2

fireWith @ jquery.min.js:2

A @ jquery.min.js:4

(anonymous) @ jquery.min.js:4

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

(anonymous) @ jquery.min.js:3

Ja @ jquery.min.js:3

append @ jquery.min.js:3

(anonymous) @ jquery.min.js:3

T @ jquery.min.js:3

html @ jquery.min.js:3

(anonymous) @ jquery.min.js:4

i @ jquery.min.js:2

fireWith @ jquery.min.js:2

A @ jquery.min.js:4

(anonymous) @ jquery.min.js:4

cb=gapi.loaded_0:48 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

(anonymous) @ 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>