從文檔中訪問文檔的文本 <iframe> 托管在其他域上

Question

我正在實現一個“小部件”，它將包含在第三方網站的文章/故事頁面中。 該小部件位於我們域中托管的<iframe>中。 它需要從其父頁面（第三方網站）的文章中收集文本，然后將其用於對返回相關內容的服務進行各種API調用，然后將其顯示在我們的<iframe>小部件中。

由於跨域安全性限制，我無法訪問父頁面的DOM，這就是問題所在。 我幾乎可以將任何需要的代碼放在父頁面上（例如，一些解析我所需內容的JavaScript），並且<iframe>也完全在我的控制之下，但我不確定如何將內容從宿主頁面下載到我的<iframe>中，因為它們托管在不同的域中。 安全性非常重要，我想找到一種不會以任何方式妥協的方法。

我最初的想法是使用查詢參數將頁面內容從父頁面傳遞到我的<iframe src =“”>屬性中：

<iframe src="http://www.mydomain.com/widget.html?page_content=This is some page content."></iframe>

我可以在父頁面上使用<script>來收集文本，然后document.write一個<iframe>，該iframe使用保存我的文本的字符串來創建動態的“ page_content”查詢參數。 然后，page_content參數可用於document.href中的<iframe>頁面。

但是，我需要從父頁面收集8 KB的文本，我的理解是GET請求的限制為1 KB-這是真的嗎？ 如果沒有，或者我可以在服務器上配置該限制，則問題可能已解決。

如果這將是一個限制，那么我還能如何發揮創意並將此文本傳遞到我的小部件中？ 這需要一個非常可擴展的解決方案，因為父網站每月會獲得數千萬的頁面瀏覽量。 我也不想以很大的方式影響父頁面的性能。

我的小部件中有jQuery，但除了父頁面中的純JavaScript之外，不能依賴任何內容。

Answer 1

如果您擔心GET請求的數據過多，請改用POST請求。 您可以嘗試類似以下問題的答案： “如何發布到iframe？” 。 然后，您可以將數據放在隱藏的文本區域中，並在父頁面上使用JavaScript提交表單。

Answer 2

實際上，您可以為此使用name屬性，它具有容納大量數據的空間。

在托管頁面上，首先創建iframe，將其.name屬性設置為包含所需的數據，然后將.src屬性設置為加載所包含的網站。 現在，它可以訪問自己的名稱，從而可以訪問數據。

托管站點可能需要首先將iframes .src設置為本地頁面，這將捕獲父文檔數據，將其放在.name屬性中並重定向到該initted站點。

Answer 3

如果您可以同時控制兩個域，則可以嘗試使用EasyXDM這樣的跨域腳本庫，該庫包裝了跨瀏覽器的怪癖（包括Sean上面提到的name屬性），並提供了易於使用的API來在客戶端腳本中進行通信使用適用於該瀏覽器的最佳可用機制（例如postMessage（如果可用），其他機制（如果沒有））在不同域之間切換 。

注意：您需要同時控制兩個域才能使其正常工作（“控制”意味着您可以在兩個域上都放置靜態文件）。 但是您不需要任何服務器端代碼更改。

另一個警告：這里涉及安全性-確保您信任另一個域的腳本！