在外部頁面上訪問元素

Question

我有一個html頁面，通過在url中放置外部頁面的鏈接訪問 - 例如，

http://www.mydomain.com/mypage?external-page=encodedURL

這是我的網頁有責任從它遞給URL湊一些數據。

如何使用javascript/jquery訪問傳入的頁面？我需要能夠提取某些類和ID的內容。

這是違反同一來源政策嗎？如果是這樣，是否有其他方式來處理這樣的外部頁面？看起來很奇怪，我可以在瀏覽器或終端命令中打開網頁並接收內容，但不能在js文件中。

Answer 1

您可以使用瀏覽器擴展來抓取外部頁面，然後將數據發送到您的站點，或者將其顯示在頁面中，以便可以通過DOM訪問頁面的JavaScript。

您可以在您的域名上使用代理來獲取外部頁面，並將其傳遞到您的域名上的JavaScript。

您可以將API用於可訪問的外部頁面。

你可以問，命令，改變外部頁面的代碼（如果您可以訪問它）擔任與網頁訪問控制允許來源= *

我覺得這是你能做的一切。

編輯：的「似乎有些奇怪」，直到你實現用戶和過程之間的預期差。用戶不被認爲是惡意的，但一個過程可能是。例如，一個進程可以從用戶登錄的gmail會話中獲取數據（如果它有權訪問外部頁面），並將該數據傳輸到服務器。由於終端上的用戶可能（但並非總是）登錄該會話的用戶，因此用戶不會被認爲是惡意的。但是，源自用戶導航到的某個網站的腳本不應該能夠以與該用戶相同的權限執行操作。由於該腳本也是代理，並且可以執行操作，但不是由用戶創建或定向的。這是孤立原產地和相同原產地政策的最強有力的理由。

例

小書籤的執行上下文，和iframe中 如果您通過書籤注入JS到每一個網頁，該注入代碼的行爲就好像它具有相同起源的休息該頁面或至少該頁面的「頂部框架」。它將在頂層框架的相同上下文中執行。如果頁面中嵌套了iframe，那麼如果您的書籤嘗試注入到該頁面，則會出現「不安全的嘗試訪問來自頁面x的錯誤」錯誤。這是因爲小書籤的起源位於首頁，頂層頁面無法訪問不同域的嵌套iframe。

所以，如果你想刮網站的某些部分是在頂部框架之下的iframe，您的書籤將無法得到它。使用

傳輸數據的書籤 如果你想利用一個網址，您的域名，然後從URL中獲取數據，另一個域，則顯示該數據傳回在同一頁上，您需要一種獲取數據的方法。你可以使用書籤，但流程仍然會涉及一些「用戶幫助」。它會是這樣的：

1. 加載您的域的網頁，D用戶把一個URL放入一個輸入框。點擊提交。
2. D上的JavaScript打開一個指向用戶提供的url的新標籤/窗口。
3. 用戶點擊外部頁面，收集所需的數據上的刮書籤，X.
4. 期望的數據，X，是通過Ajax發送到「服務器」，S，與會話標識符I.
5. 頁d，輪詢服務器S，直到它得到通知，有些數據與會話標識符我已經抓住了，那麼它得到的數據，並將其顯示D.

有需要的服務器。您不能使用本地存儲傳輸信息，因爲這是特定於域的信息。有一種替代方案不需要服務器。它需要製作瀏覽器擴展。

使用瀏覽器擴展傳輸數據擴展的「背景頁面」與所有瀏覽器選項卡的本地服務器基本相同，它允許跨目標到不同域的標籤傳輸信息。這個設置中的「客戶端」是「內容腳本」，它被加載到每個頁面（就像書籤一樣，除非用戶實際需要點擊書籤加載它。流程如下：

1. Page D再次。用戶在輸入框中輸入url。點擊submit - >這會在擴展中觸發一些代碼。
2. 擴展後臺頁面指示打開一個選項卡並將其定位到該URL。
3. 內容腳本會自動加載到該選項卡中，並與後臺檢查應該獲得的數據。它通過一條消息（一個json字符串）獲取數據並將其發送到後臺頁面。
4. 後臺頁面將該通知和數據推送到頁面D上的原始內容腳本。其中顯示信息。
5. （可選）後臺頁面還會將信息傳輸到您的服務器以保存到該用戶的數據存儲中。

我用於瀏覽器擴展「背景頁面」和「內容腳本」的語言非常專注於Google Chrome。 Safari，Firefox也有相同的概念。如果你想支持IE，你將不得不制定一些其他的東西。 IE10甚至不打算支持擴展。

Answer 2

如果外部頁面和頁面位於相同域，那麼您應該可以使用JavaScript訪問該外部頁面。否則，JavaScript將不被允許訪問外部網站，瀏覽器將阻止Cross-site scripting。