如何將外部網站上的div中的內容存儲到javascript變量中？

Question

我想要做的是在另一個網站（我不控制）的 div 中獲取內容並在我自己的網站上顯示內容。 例如，我們將使用這兩個站點：

• 我的網站.com
• 其他網站.com

在othersite.com ，div 中有一些文本內容，我想用 javascript 獲取並定期更新（假設每小時檢查一次）。 例如， <div class="some-div">9384</div> 。

現在，在mysite.com上，我想使用 javascript 將這個結果 output 放入我自己的 div 中。我想這實際上是 web 抓取。

為此，我想保存一個偶爾像每小時更新一次的變量。

使用 jquery，我可以定義一個變量並提取內容。 如果它在同一個網站上，但事實並非如此，我可以這樣做：

/* HTML with content to fetch */
<div class="some-div">9384</div>

/* get the content with jquery */
var getDiv = document.getElementsByClassName('some-div');
var getContent = getDiv.innerHTML;

如果它在同一個站點上，那么它將獲取 div 中的內容並將其存儲到變量getContent中。 在這里， getContent將等於9384 。

然后我可以在任何我想要的地方使用它，比如用從somediv獲取的內容替換mysite.com上空白 div 的內容，如下所示：

/* HTML where the content will be output */
<div class="output-div"></div>   

/* replace the content with jquery form a stored variable */
var getMyDiv = document.getElementsByClassName('output-div');
getMyDiv.innerHTML = getContent.innerHTML; 

結果將是：

<div class="output-div">9384</div>   

但是， some-div div 的內容不在同一個 URL 上（我不控制其他站點）。

我該怎么做，而不是從當前頁面或站點獲取 some- some-div ，而是從外部站點（我不控制）獲取some-div內容？

Answer 1

如果你想使用 jQuery：

$.get('http://othersite.com', function(data) {
    var $othersite = $(data);

    var getDiv = $othersite.find('.some-div');
    var getContent = getDiv.html();

    var getMyDiv = $('.output-div');
    getMyDiv.html(getContent);
});

如果你想在沒有 jQuery 的情況下使用 JavaScript：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://othersite.com', true);
xhr.responseType = 'document';
xhr.send();
xhr.onload = function(e) {  
    var othersite = e.target.responseXML;

    var getDiv = othersite.getElementsByClassName('some-div');
    var getContent = getDiv.innerHTML;
 
    var getMyDiv = document.getElementsByClassName('output-div');
    getMyDiv.innerHTML = getContent;
}

Answer 2

其他不用擔心CORS，可以嘗試以下步驟：

1. 通過 jquery/javascript 向您的服務器發出 AJAX 請求。
2. 通過您的服務器端語言（例如 PHP）從您的服務器向othersite.com發出請求。
3. 然后，您可以隨心所欲地操縱 AJAX 響應。

示例- 步驟 1 和步驟 3

$.get('mysite.com/some-php-file.php', function(data) {
    let $othersiteHtml = $('<div />').html(data);

    let getSomeText = $othersiteHtml.find('.some-div').text();
    $('.output-div').html(getSomeText);
});

第 2 步 - 您可以將以下代碼放入服務器上的 PHP 文件中。

<?php

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "othersite.com");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);

echo $output;

?>