[英]Using JQuery to load an html page into a container on click
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. 我试图使用加载功能将HTML从一个页面上的html单击导入,但是单击按钮时似乎什么也没发生。 How can I fix the problem?
我该如何解决该问题?
The console error I am receiving is: 我收到的控制台错误是:
jquery.min.js:4 XMLHttpRequest cannot load file:///C:/Users/Ian/Google%20Drive/Project%20Georgia/history.html.
jquery.min.js:4 XMLHttpRequest无法加载文件:/// C:/Users/Ian/Google%20Drive/Project%20Georgia/history.html。 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
跨源请求仅支持以下协议方案:http,数据,chrome,chrome扩展名,https。
Here is the script: 这是脚本:
<script>
$(document).ready(function(){
$("#btn-history").click(function(){
$("#displayed-text").load("history.html");
});
});
</script>
The input button: 输入按钮:
<input id="btn-history" type="image" src="img/history.gif" alt="Golden Lion" class="menu-icon">
And the container: 和容器:
<p id="displayed-text">This is where text will show up.</p>
Edit: 编辑:
After learning I cannot load from the C drive, I uploaded the page to Google Drive and modified my script as follows: 了解到无法从C驱动器加载后,我将该页面上传到了Google Drive,并如下修改了脚本:
$("#btn-history").click(function(){
$("#displayed-text").load("https://drive.google.com/file/d/0B7fJXEIdt8OCT2ozTlNaRktOZm8/view?usp=sharing");
});
However, am still receiving errors. 但是,我仍然收到错误。
jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
jquery.min.js:4不赞成在主线程上使用同步XMLHttpRequest,因为它会对最终用户的体验产生不利影响。 For more help, check https://xhr.spec.whatwg.org/ .
如需更多帮助,请访问https://xhr.spec.whatwg.org/ 。
send @ jquery.min.js:4
发送@ jquery.min.js:4
ajax @ jquery.min.js:4
阿贾克斯@ jquery.min.js:4
r._evalUrl @ jquery.min.js:4
r._evalUrl @ jquery.min.js:4
Ja @ jquery.min.js:3
Ja @ jquery.min.js:3
append @ jquery.min.js:3
追加@ jquery.min.js:3
(anonymous) @ jquery.min.js:3
(匿名)@ jquery.min.js:3
T @ jquery.min.js:3
T @ jquery.min.js:3
html @ jquery.min.js:3
html @ jquery.min.js:3
(anonymous) @ jquery.min.js:4
(匿名)@ jquery.min.js:4
i @ jquery.min.js:2
我@ jquery.min.js:2
fireWith @ jquery.min.js:2
fireWith @ jquery.min.js:2
A @ jquery.min.js:4
一个@ jquery.min.js:4
(anonymous) @ jquery.min.js:4
(匿名)@ jquery.min.js:4
jquery.min.js:4 XMLHttpRequest cannot load
jquery.min.js:4 XMLHttpRequest无法加载
file:///C:/static/file/client/js/1539922584-projector_viewer__ka.js.
文件:/// 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.
跨源请求仅支持以下协议方案:http,数据,chrome,chrome扩展名,https。
send @ jquery.min.js:4
发送@ jquery.min.js:4
ajax @ jquery.min.js:4
阿贾克斯@ jquery.min.js:4
r._evalUrl @ jquery.min.js:4
r._evalUrl @ jquery.min.js:4
Ja @ jquery.min.js:3
Ja @ jquery.min.js:3
append @ jquery.min.js:3
追加@ jquery.min.js:3
(anonymous) @ jquery.min.js:3
(匿名)@ jquery.min.js:3
T @ jquery.min.js:3
T @ jquery.min.js:3
html @ jquery.min.js:3
html @ jquery.min.js:3
(anonymous) @ jquery.min.js:4
(匿名)@ jquery.min.js:4
i @ jquery.min.js:2
我@ jquery.min.js:2
fireWith @ jquery.min.js:2
fireWith @ jquery.min.js:2
A @ jquery.min.js:4
一个@ jquery.min.js:4
(anonymous) @ jquery.min.js:4
(匿名)@ jquery.min.js:4
VM644:1 Uncaught ReferenceError: _initProjector is not defined
VM644:1未捕获的参考错误:_initProjector未定义
at :1:1
在:1:1
at p (jquery.min.js:2)
在p(jquery.min.js:2)
at Ja (jquery.min.js:3)
在Ja(jquery.min.js:3)
at r.fn.init.append (jquery.min.js:3)
在r.fn.init.append(jquery.min.js:3)
at r.fn.init.
在r.fn.init。 (jquery.min.js:3)
(jquery.min.js:3)
at T (jquery.min.js:3)
在T(jquery.min.js:3)
at r.fn.init.html (jquery.min.js:3)
在r.fn.init.html(jquery.min.js:3)
at Object.
在对象。 (jquery.min.js:4)
(jquery.min.js:4)
at i (jquery.min.js:2)
在我(jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
在Object.fireWith [as resolveWith](jquery.min.js:2)
(anonymous) @ VM644:1
(匿名)@ VM644:1
p @ jquery.min.js:2
p @ jquery.min.js:2
Ja @ jquery.min.js:3
Ja @ jquery.min.js:3
append @ jquery.min.js:3
追加@ jquery.min.js:3
(anonymous) @ jquery.min.js:3
(匿名)@ jquery.min.js:3
T @ jquery.min.js:3
T @ jquery.min.js:3
html @ jquery.min.js:3
html @ jquery.min.js:3
(anonymous) @ jquery.min.js:4
(匿名)@ jquery.min.js:4
i @ jquery.min.js:2
我@ jquery.min.js:2
fireWith @ jquery.min.js:2
fireWith @ jquery.min.js:2
A @ jquery.min.js:4
一个@ jquery.min.js:4
(anonymous) @ jquery.min.js:4
(匿名)@ 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
jquery.min.js:3 GET文件:/// C:/static/file/client/css/469530624-projector_css_ltr.css net :: ERR_FILE_NOT_FOUND
(anonymous) @ jquery.min.js:3
(匿名)@ jquery.min.js:3
Ja @ jquery.min.js:3
Ja @ jquery.min.js:3
append @ jquery.min.js:3
追加@ jquery.min.js:3
(anonymous) @ jquery.min.js:3
(匿名)@ jquery.min.js:3
T @ jquery.min.js:3
T @ jquery.min.js:3
html @ jquery.min.js:3
html @ jquery.min.js:3
(anonymous) @ jquery.min.js:4
(匿名)@ jquery.min.js:4
i @ jquery.min.js:2
我@ jquery.min.js:2
fireWith @ jquery.min.js:2
fireWith @ jquery.min.js:2
A @ jquery.min.js:4
一个@ jquery.min.js:4
(anonymous) @ jquery.min.js:4
(匿名)@ 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').
cb = gapi.loaded_0:48无法在'DOMWindow'上执行'postMessage':提供的目标原点('file://')与收件人窗口的原点('null')不匹配。
(anonymous) @ cb=gapi.loaded_0:48
(匿名)@ cb = gapi.loaded_0:48
Have you tried e.preventDefault()
: 您是否尝试过
e.preventDefault()
:
<script>
$(document).ready(function(){
$("#btn-history").click(function(e){
e.preventDefault();
$("#displayed-text").load("history.html");
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.