title: Using JQuery to load an html page into a container on click
body: <p>I am attempting to using the load function to import html from one page into another on click, but nothing seems to be happening when I click the button. How can I fix the problem?</p>
  
  <p>The console error I am receiving is: </p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>Here is the script:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
          $("#btn-history").click(function(){
              $("#displayed-text").load("history.html");
         });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The input button:</p>
  
  <pre><code>&lt;input id="btn-history" type="image" src="img/history.gif" alt="Golden Lion" class="menu-icon"&gt;
  </code></pre>
  
  <p>And the container:</p>
  
  <pre><code>&lt;p id="displayed-text"&gt;This is where text will show up.&lt;/p&gt;
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>After learning I cannot load from the C drive, I uploaded the page to Google Drive and modified my script as follows:</p>
  
  <pre><code>        $("#btn-history").click(function(){
              $("#displayed-text").load("https://drive.google.com/file/d/0B7fJXEIdt8OCT2ozTlNaRktOZm8/view?usp=sharing");
         });
  </code></pre>
  
  <p>However, am still receiving errors. </p>
  
  <blockquote>
    <p>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 <a href="https://xhr.spec.whatwg.org/" rel="nofollow noreferrer">https://xhr.spec.whatwg.org/</a>.</p>
    
    <p>send @ jquery.min.js:4</p>
    
    <p>ajax @ jquery.min.js:4</p>
    
    <p>r._evalUrl @ jquery.min.js:4</p>
    
    <p>Ja @ jquery.min.js:3</p>
    
    <p>append @ jquery.min.js:3</p>
    
    <p>(anonymous) @ jquery.min.js:3</p>
    
    <p>T @ jquery.min.js:3</p>
    
    <p>html @ jquery.min.js:3</p>
    
    <p>(anonymous) @ jquery.min.js:4</p>
    
    <p>i @ jquery.min.js:2</p>
    
    <p>fireWith @ jquery.min.js:2</p>
    
    <p>A @ jquery.min.js:4</p>
    
    <p>(anonymous) @ jquery.min.js:4</p>
    
    <p>jquery.min.js:4 XMLHttpRequest cannot load </p>
    
    <p>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.</p>
    
    <p>send @ jquery.min.js:4</p>
    
    <p>ajax @ jquery.min.js:4</p>
    
    <p>r._evalUrl @ jquery.min.js:4</p>
    
    <p>Ja @ jquery.min.js:3</p>
    
    <p>append @ jquery.min.js:3</p>
    
    <p>(anonymous) @ jquery.min.js:3</p>
    
    <p>T @ jquery.min.js:3</p>
    
    <p>html @ jquery.min.js:3</p>
    
    <p>(anonymous) @ jquery.min.js:4</p>
    
    <p>i @ jquery.min.js:2</p>
    
    <p>fireWith @ jquery.min.js:2</p>
    
    <p>A @ jquery.min.js:4</p>
    
    <p>(anonymous) @ jquery.min.js:4</p>
    
    <p>VM644:1 Uncaught ReferenceError: _initProjector is not defined</p>
    
    <p>at :1:1</p>
    
    <p>at p (jquery.min.js:2)</p>
    
    <p>at Ja (jquery.min.js:3)</p>
    
    <p>at r.fn.init.append (jquery.min.js:3)</p>
    
    <p>at r.fn.init. (jquery.min.js:3)</p>
    
    <p>at T (jquery.min.js:3)</p>
    
    <p>at r.fn.init.html (jquery.min.js:3)</p>
    
    <p>at Object. (jquery.min.js:4)</p>
    
    <p>at i (jquery.min.js:2)</p>
    
    <p>at Object.fireWith [as resolveWith] (jquery.min.js:2)</p>
    
    <p>(anonymous) @ VM644:1</p>
    
    <p>p @ jquery.min.js:2</p>
    
    <p>Ja @ jquery.min.js:3</p>
    
    <p>append @ jquery.min.js:3</p>
    
    <p>(anonymous) @ jquery.min.js:3</p>
    
    <p>T @ jquery.min.js:3</p>
    
    <p>html @ jquery.min.js:3</p>
    
    <p>(anonymous) @ jquery.min.js:4</p>
    
    <p>i @ jquery.min.js:2</p>
    
    <p>fireWith @ jquery.min.js:2</p>
    
    <p>A @ jquery.min.js:4</p>
    
    <p>(anonymous) @ jquery.min.js:4</p>
    
    <p>jquery.min.js:3 GET file:///C:/static/file/client/css/469530624-projector_css_ltr.css net::ERR_FILE_NOT_FOUND</p>
    
    <p>(anonymous) @ jquery.min.js:3</p>
    
    <p>Ja @ jquery.min.js:3</p>
    
    <p>append @ jquery.min.js:3</p>
    
    <p>(anonymous) @ jquery.min.js:3</p>
    
    <p>T @ jquery.min.js:3</p>
    
    <p>html @ jquery.min.js:3</p>
    
    <p>(anonymous) @ jquery.min.js:4</p>
    
    <p>i @ jquery.min.js:2</p>
    
    <p>fireWith @ jquery.min.js:2</p>
    
    <p>A @ jquery.min.js:4</p>
    
    <p>(anonymous) @ jquery.min.js:4</p>
    
    <p>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').</p>
    
    <p>(anonymous) @ cb=gapi.loaded_0:48</p>
  </blockquote>