懸停的網址顯示在一個彈出的div網站？

我試圖做這樣的事情：懸停的網址顯示在一個彈出的div網站？

<a href="http://www.google.com">Google</a>

當用戶將鼠標懸停在鏈接：

<div id="display-site"> 

//working site contained in a div 

</div>

注意我知道我可以打開使用HTML一個新窗口中的鏈接，以爲我我很想知道如何去預覽<a>標籤中包含的網站在div容器中（如果鏈接被徘徊）。

來源

2012-06-24 AnchovyLegend

如果你的服務器支持PHP，這個[link]（http://stackoverflow.com/questions/1237707/load-website-into-div）也許有用。 – Farahmand

在div內容中使用iframe的工具提示概念...編輯：是的Michael是正確的.. – sree

這可以通過在DOM上創建來完成，方法是將鼠標懸停在<a>上，然後加載href作爲iframe的src=屬性。爲了使它看起來像一個彈出窗口，您需要將放置在絕對位置，並將其z-index CSS屬性設置爲比其餘頁面內容更高的值。但是，如果您需要對加載框架的顯示進行修改，例如根據@David的回答建議調整某些元素的大小以適應縮放級別，則可能會遇到與源代碼相同的策略，如腳本將不被允許訪問加載框架的屬性outisde相同的域。

From MDN:

腳本試圖訪問一個框架的內容都受到了同源策略，如果它是從不同的域加載不能訪問大部分屬性在另一個窗口對象。這也適用於試圖訪問其父窗口的框架內的腳本。使用window.postMessage仍然可以實現跨域通信。

來源

2012-06-24 18:01:21

什麼是相同的原產地政策與此？只要在iframe中打開一個網站是不可能的呢？我更害怕那些不喜歡以框架打開並且以'_top'打開的網站。 – Rudie

@Rudie我誤讀了MDN文檔，然後我自己的一個測試失敗了，但你是對的。 –

在繼續之前 - 檢查此操作是否有益於用戶體驗。當我將鼠標移動到一個頁面上並刷過超鏈接時，我並不總是希望鏈接預覽顯示在頂部。但是，假設這符合您的用戶的最佳利益...

實施方面，可以通過使用來完成此操作，但是iframe中的文檔將顯示在用戶的設置中縮放級別，但顯示至少爲1024x768的文檔的250x250窗口不會幫助用戶。因此，您需要向用戶顯示網頁的縮小，鳥瞰圖。

有辦法獲得當前的視口縮放級別（How to detect page zoom level in all modern browsers?），但我不知道如何設置它的工作原理（在所有情況下，它可能在大多數情況下是不可能的）。此外，我不認爲你可以在每個iframe的基礎上設置縮放（假設你可以設置全部）。

那麼最好的方法就是向用戶顯示一個縮小的位圖頁面渲染 - 就像Google在其搜索結果中爲熱門頁面所做的那樣。但是這意味着對於每個鏈接到的頁面，您都需要獲取目標頁面的渲染圖像。

我記得幾年前，有些公司提供頁面縮略圖服務（它是2005 - 2008年左右流行的網頁中令人討厭的雙下劃線廣告文本的一部分），但它們現在很稀少。

我想你必須設置自己的服務並以一種可以爲你生成頁面縮略圖的方式託管一個佈局引擎（Gecko，WebKit或Trident）。

所有事情都考慮過了，我認爲這不值得。

來源

2012-06-24 18:07:07 Dai

這樣的事情，只是一個想法

$('a').hover(function() 
{ 
    $('#display-site').load((this).attr('href')); 
    $('#display-site').show(); 
});

需要

來源

2012-06-24 18:10:11 codingbiz

jQuery無法加載外部鏈接。 – Farahmand

1查找元素上懸停顯示工具提示一個jQuery插件，您將需要設置CSS屬性。
2-在工具提示容器中的div中插入鏈接引用的網站的Iframe。

來源

2012-06-24 22:51:00 menislici

懸停的網址顯示在一個彈出的div網站？

回答

相關問題