如何用包含頁面內容的iframe替換頁面的內容？

-2

我想創建一個擴展插件，將當前頁面的內容放入一個iframe中，並將另一頁面的內容放入另一個iframe中，並且將它們並排顯示（兩個iframe均爲width:50%;float:left）。如何用包含頁面內容的iframe替換頁面的內容？

我得的是：

var h = jQuery('html'); 
h.html('<iframe src="data:text/html;charset=utf-8,' + escape(h.html()) + '" style="width:50%; float:left;"></iframe><iframe src="...');

我的問題是它不是渲染CSS或加載JS。

作爲一種權宜之計，我設置src屬性爲location.href，但只完成當前頁面的GET，其內容可在POST改變。

如何獲取iframe以呈現css和js？

來源

2017-07-04 Richard Parnaby-King

我不介意倒票，只要它們伴有建設性的意見。 **爲什麼我會被拒絕投票？** –

此問題是由於iframe的資源無法計算出主機是什麼。因此，因爲我的參考資料都是相對的，所以他們無法找到完整的路徑。即我已將iframe的src設置爲一個HTML字符串，並且css路徑與/css/styles.css類似 - 它無法解析/css/styles.css相對於HTML字符串。

的解決方案是一個<base href="" />標籤添加到HTML的頭：

h.find('head').prepend('<base href="'+location.origin+'"/>');

完整的劇本，現在看起來像：

var h = jQuery('html'); 
h.find('head').prepend('<base href="'+location.origin+'"/>'); 
h.html('<iframe src="data:text/html;charset=utf-8,' + escape(h.html()) + '" style="width:50%; float:left;"></iframe><iframe src="...');

的base標籤告訴所有的相對URL前面加上屬於自己的href;即把相關的css url從/css/styles.css改爲http://example.com/css/styles.css

來源

2017-07-04 11:22:46

根據您的使用情況，您可能會遇到一些網站，這些網站會應用framebusting，即檢測是否加載到iframe中，然後在_top中重新加載或拒絕加載等（作爲安全措施或出於與控制有關的任何其他原因）。 –

如何用包含頁面內容的iframe替換頁面的內容？

回答

相關問題