有關在Safari和Chrome的啓動頁面中使用iframe的問題

Question

如果您曾經使用過Chrome或Safari的新版本，那麼您知道在添加新選項卡時，默認屏幕是一個網格，坐在那裏等待被點擊的最喜歡的鏈接。更好的是圖形界面，以及他們所代表的網站的實際圖片。

我期待着做類似的事情，它是如何完成的？他們只是iframe？內置框架與CSS設置？如果任何人有任何關於這個看似簡單的功能的實際執行的知識，請分享！謝謝

Answer 1

在Chrome中，我可以選擇查看源代碼（Ctrl + U）或使用Web Inspector（Shift + Ctrl + I）查看「新標籤」頁面。這些縮略圖確實是瀏覽器窗口的截圖（並且使用JavaScript動態添加到DOM中，所以在查看頁面源時，您不會找到它們），因爲這樣的縮略圖的來源看起來像（從Web Inspector複製的）：

<a class="thumbnail-container" tabindex="1" id="t1" style="left: 235px; top: 0px; " href="http://www.ns.nl/"> 
    <div class="edit-mode-border"> 
    <div class="edit-bar"> 
     <div class="pin" title="Keep on this page"></div> 
     <div class="spacer"></div> 
     <div class="remove" title="Don't show on this page"></div> 
    </div> 
    <span class="thumbnail-wrapper" style="background-image: url(chrome://thumb/http://www.ns.nl/); "> 
     <span class="thumbnail"></span> 
    </span> 
    </div> 
    <div class="title"> 
    <div style="background-image: url(chrome://favicon/http://www.ns.nl/); " dir="ltr" title="Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers">Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers</div> 
    </div> 
</a> 

我猜Safari的功能差不多，但我現在無法檢查。

Answer 2

他們只是緩存的縮略圖圖像，瀏覽器上次訪問該頁面時所做的。它們不是真正的瀏覽器頁面，您可以與之交互。

要從另一個網頁上做到這一點，你必須讓你的服務器獲取頁面，渲染和縮略圖。或者使用爲您提供的第三方服務。無論哪種方式，您都不會獲得用戶看到的完全相同的圖像，因爲他們可能具有授權或您的服務器不知道的設置。

Answer 3

就我在Chrome中可以看到的，它沒有使用iframe。看起來好像Chrome使用早期訪問的屏幕截圖。至少我沒有經歷過，在我第一次看到它後，背景發生了變化。所以我的猜測是，chrome的初始頁面是「custom」，而不是Html。 至於Safari我真的不知道。