我想在我的 div 标签中加载 html 页面

Question

 function secondCategory(i) {
      var liName = 's_li_' + i;
      $('#' + liName).click(function() {
        $('.article').load('http://google.com');
      });
    }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

我喜欢在我的 div 标签、文章中加载 html 页面。但它发生错误 "Failed to load 'website adress': Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

[http://wedontknow.dothome.co.kr
./index.html
http://google.com][1]

以上我试过的网站都出现了错误。如何加载 html 页？

Answer 1

除非您拥有外部网站，否则您无法加载它，因为您需要启用跨源资源共享

对于本地文件，发生此错误是因为您只是直接从浏览器打开 html 文档。要解决此问题，您需要从网络服务器提供您的代码并在 localhost

上访问它

Answer 2

这确实是服务器端的问题。我避免使用 .load(); 仅仅是因为它总是会出现 COR 问题。我会对此上釉：Enable CORs

不过，我的建议是将所有 html 代码作为字符串放在 JS 文件中。这不是那么优雅，可能会很混乱，但此后移动起来又快又容易。

var html = '<div id="div-id"><p>Hi there!</p></div>';

$('#target-div').html(html);

我一直都是这样做的，尽管您可能会开始得到一些长得离谱的字符串。您可以像这样连接它们，这样更容易阅读：

var html = 
'<div id="wrapper">' +
    '<div id="inner">' +
        '<p>Hello!</p>' +
    '</div>' +
'</div>';

$('#target-div').html(html);

这不是最漂亮的东西，但我已经编写了像这样的完整成熟的网络应用程序，它从不出现安全问题（即 COR）并且速度非常快。

对多个服务器使用此方法

假设你对其他服务器的响应有发言权，你总是可以做一个好的 ole post 请求。

var postData = {
    optionalData: 1234
};

$.post('https://google.com', postData, function(res) {
    $('#target-div').html(res)
});

我想在我的 div 标签中加载 html 页面

I want to load html page in my div tag

javascript

jquery

load

对多个服务器使用此方法