简体   繁体   English

js:从其他域加载页面的html

[英]js: Load html of a page from a different domain

I was wondering how can I load HTML, which is hosted on a different domain? 我想知道如何加载托管在不同域中的HTML?

I am using JavaScript, and want to create a bookmarklet that will enable me to parse the external HTML. 我正在使用JavaScript,并且想创建一个书签,使我能够解析外部HTML。

I have been googling for hours in vain... 我白白搜寻了好几个小时...

JavaScript isn't allowed to make cross-domain requests. 不允许JavaScript发出跨域请求。 It's a big security risk. 这是一个很大的安全风险。 Instead, you'll have to execute a script on the server and have it return the results to your JavaScript function. 相反,您将必须在服务器上执行脚本并将其返回给JavaScript函数。

For example, assuming that you're using JavaScript and PHP you could setup the application to work like this: 例如,假设您使用的是JavaScript和PHP,则可以将应用程序设置为如下所示:

JavaScript initiates an Ajax request to a page (or script) located on your server. JavaScript向服务器上的页面(或脚本)发起Ajax请求。 It passes any required parameters to this page. 它将任何必需的参数传递到此页面。 The following code is based on jQuery (for the sake of being concise), but the principles are the same regardless of your framework. 以下代码基于jQuery(为简洁起见),但是无论您使用什么框架,其原理都是相同的。

var sParameters = " ... " // this is defined by you
$.ajax({
  url: 'your-server-side-code.php',
  processData: false,
  data: sParameters,
  success: function(sResponse) {
    // handle the response data however you want
  }
});

The server-side code will respond to the request and pass along the necessary parameters to the cross-domain website. 服务器端代码将响应该请求,并将必要的参数传递到跨域网站。 PHP's cURL library is good for this. PHP的cURL库对此非常有用

// very contrivuted cURL configuration for purposes of example...
$curl_connection = curl_init();
$str_url = "http://you-url.com";
curl_setopt($curl_connection, CURLOPT_URL, $str_url);
curl_setopt($curl_connection, CURLOPT_GET, 1);
// ... keep setting your options ...
$str_response = curl_exec($curl_connection);
curl_close($curl_connection);

When the cross-domain website responds, your server-side code can echo the response back to the initial request. 当跨域网站响应时,您的服务器端代码可以将响应回显到初始请求。 This should probably be validated before responding back, but it's just an example. 这可能应该在回复之前进行验证,但这只是一个例子。

print_r($str_response);

A JavaScript response handler function can then parse the incoming response data. 然后,JavaScript响应处理程序函数可以解析传入的响应数据。 Note the success function in the first block of JavaScript code above. 注意上面JavaScript代码的第一部分中的成功函数。

If you don't own the other page, it'll be very difficult. 如果您不拥有其他页面,那将非常困难。

In fact, you can't make a request to another domain in javascript. 实际上,您无法使用javascript向另一个域发出请求。 The only thing you can do is load a script from another domain: 您唯一可以做的就是从另一个域加载脚本:

<script type="text/javascript" src="http://otherdomain.com/script.js"></script>

If the purpose of this is to load data from the other domain, and (as I said) you own the other site, you can create the script.js file, which will load the data you need in your original site. 如果这样做的目的是从另一个域加载数据,并且(如我所说)您拥有另一个站点,则可以创建script.js文件,该文件将在原始站点中加载所需的数据。

Remember this is a delicate thing, and should be done only if you know what there will be in the script. 请记住,这是一件微妙的事情,只有在您知道脚本中将要包含的内容时,才应该这样做。

You can make cross-domain requests from localhost , but if you plan to deploy this code to a server, it's not going to work. 您可以从localhost发出跨域请求,但是如果您打算将此代码部署到服务器,它将无法正常工作。 Since you are developing a bookmarklet, I think you can do this. 由于您正在开发一个书签,我想您可以做到这一点。

You'll need to use AJAX to get the remote HTML. 您需要使用AJAX来获取远程HTML。

The jQuery library makes this task as simple as this... jQuery库使此任务变得如此简单...

$.get("http://www.google.com", function(html) { alert(html); });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM