从页面获取 html 而不是加载页面答案

【问题标题】：Get html from a page instead of loading the page从页面获取 html 而不是加载页面
【发布时间】：2015-07-03 15:00:22
【问题描述】：

我有一个按钮可以加载带有window.open(); 的页面

不加载页面，是否可以在不打开页面的情况下从页面中获取html？

【问题讨论】：

欢迎来到AJAX。
您是否尝试过使用 AJAX 从您尝试访问的页面下载信息？

标签： javascript html

【解决方案1】：

使用ajax 和jQuery：

$.get( "myNewPage.html", function( data ) {
  $( "#myNewPage" ).html( data );
});

【讨论】：

@ZacharyWeixelbaum 这个答案已经假设OP熟悉jQuery，因为我使用jQuery.get方法，它是jQuery的一部分...如果他熟悉jQuery，他'我很容易理解我的示例代码需要一个由myNewPage 标识的 HTML 标记作为 DOM 的一部分。
你能在 myNewPage.html 中添加一个 url 吗？
它似乎不适用于不在服务器上的外部 URL。不过还是谢谢你的建议。
@Programatic 如果您在谈论外部 url，那么您必须确保您尝试访问的站点在其响应中向您发送正确的 HTTP 标头，如下所述： stackoverflow.com/a/10636765/1905446 总而言之，如果你不是这个外部 url 的所有者，这会很复杂。
也许你会想使用<iframe>标签。

【解决方案2】：

正如其他人所说，AJAX（异步 JavaScript 和 XML）是要走的路。 jQuery 之类的库提供了一种易于使用的方法。在库之外，JavaScript 有一个 XMLHttpRequest 对象，您可以使用它来做同样的事情。

这个想法是向一个页面发出请求，并在某个回调中返回该页面上的标记，然后用该标记做你想做的事情。

这是一个例子：

var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
  if(xmlhttp.readyState==4 && xmlhttp.status==200) {
    // the ajax request is done, and the server responded with the html page
    // log the result from the ajax request
    console.log(xmlhttp.responseText);
  }
}
xmlhttp.open("GET","myPage.html",true);
xmlhttp.send();

编辑

如果您同时拥有两个域，即发出请求的域和被请求的域，那么您可以使用CORS。这将告诉另一台服务器允许来自第一个域的请求。

如果您不拥有两个域，或者无法访问双方，那么这将变得更加困难。您可以从服务器端发出 HTTP 请求，也可以查看 some other answers on here

【讨论】：

如何使用指向不同页面的 url 做到这一点？我阅读了 xmlhttp 请求，它们不支持跨域访问
我已经更新了我的答案，以便对此进行更多解释。如果您访问的是不同的服务器，那么事情会变得稍微困难一些，但并非不可能。

【解决方案3】：

请使用jquery加载方式。

根据文档，

此方法是从服务器获取数据的最简单方法。这是大致相当于 $.get(url, data, success) 除了它是一个方法而不是全局函数，它有一个隐式回调功能。当检测到成功响应时（即当 textStatus 是“成功”或“未修改”），.load() 设置的 HTML 内容与返回数据匹配的元素。这意味着大多数使用方法可以很简单。

.load( url [, data ] [, complete ] )

url 类型：字符串；包含请求发送到的 URL 的字符串。

数据类型：普通对象或字符串；发送到带有请求的服务器。

完整类型：函数（字符串响应文本，字符串 textStatus, jqXHR jqXHR );执行的回调函数当请求完成时。

参考：Click Here for jquery documentation ：Another Stack overflow question on the same lines

【讨论】：

这是否适用于 url 而不是静态网页？
是的。它适用于任何网址。您甚至可以加载 google.com

【解决方案4】：

您可能想查看 AJAX 请求：https://developer.mozilla.org/de/docs/AJAX

【讨论】：