1. 首頁
  2. 問答
  3. 使用javascript將遠程頁面加載到DOM中

使用javascript將遠程頁面加載到DOM中

2009-09-24 71 views
2

我正在嘗試編寫一個Web部件，該部件允許用戶在自己的網頁中顯示自定義信息（來自我的網站）。我想使用的機制（用於創建Web小部件）是javascript。使用javascript將遠程頁面加載到DOM中

所以基本上，我希望能夠寫一些JavaScript代碼是這樣的（這是最終用戶拷貝到他們的HTML頁面，在其頁面上得到顯示的內容我的小部件）

<script type="text/javascript"> 
/* javascript here to fetch page from remote url and insert into DOM */ 
</script>

我有兩個問題：

  1. 我怎麼寫javascript代碼從遠程URL抓取網頁？ 理想的情況下，這將是普通的JavaScript（即不使用jQuery等 - 因爲我不想強迫用戶去第三方腳本的jQuery這可能與他們的網頁等其他腳本衝突）

  2. 我抓取的網頁中含有內嵌的JavaScript，它獲取在body.onLoad事件，以及它們在響應用戶操作使用的其他功能執行的 - 我的問題是：

我）。 body.onLoad事件是否會爲檢索到的文檔觸發？ ii）。如果將檢索到的頁面直接轉儲到DOM中，則文檔將包含兩個<body>部分，該部分不再有效（X）HTML - 但是，我需要觸發body.onLoad事件才能正確設置頁面，而且我還需要檢索頁面中的其他功能，以便檢索到的頁面能夠響應用戶交互。

關於如何解決這些問題的任何建議/提示？

來源

2009-09-24 scoobydoo

回答

5

這有兩種方法。

  1. 主機站點使用標記將頁面包含在頁面中的固定大小框中。它在自己的document中運行，它自己的<body>和onload事件;它位於您網站的安全上下文中，因此如果出於某種原因需要，可以使用AJAX回撥至您的服務器。

    這很簡單;訪客頁面甚至不需要知道它被包含在iframe中。

  2. 主機站點使用<script src="http://your-site/thing.js"></script>從您的服務器運行腳本。您的腳本使用document.write()或DOM方法直接在主機文檔內創建一系列內容。無論哪種方式，你知道什麼時候你已經完成把它們放在適當的位置，所以你不需要onload。

    您正在主機的安全上下文中運行，因此您無法將AJAX發送到服務器或直接查看服務器的Cookie;任何此類數據都必須作爲腳本的一部分提供。 （您可以可以將主機服務器的cookies和跨站點腳本查看到他們的任何頁面中，反之，如果腳本中有任何敏感數據，主機站點也可以查看它，因此存在隱式信任關係任何時候一個網站從另一個腳本內容中獲取腳本）

來源

2009-09-24 01:30:11 bobince

+0

感謝bobince，這就是我一直在尋找的東西。我懇求我會採用iframe的方法（甚至認爲它是在HTLM的後續版本中進行deprectaed） – scoobydoo 2009-09-24 09:29:59

+0

iframe在HTML過渡中，但它不被棄用，也不會消失（例如在HTML5中）。這更多的「框架」被認爲是一件壞事。 – bobince 2009-09-24 12:10:47

+0

感謝您的澄清！ （讓我更有信心去