7

Safariの[トップサイト]セクションでは、以下に示すように、iCloud.comの画像にログイン画面ではなくロゴが表示されます。通常、トップサイトには、ロードされたWebページの画像のみが表示されます（ロードされたページはこのようには見えません）。彼らがこれをどのように達成したかあなたは何か考えがありますか？Appleのドキュメントには何も見つかりませんでした。ご協力いただきありがとうございます。

ここに画像の説明を入力してください

4

5 に答える 5

7

トップサイト固有のプレビューを表示するためにiCloudでどのように行われるかを次に示します:(フォーマット用に編集）

if (window.navigator && window.navigator.loadPurpose === "preview") {
    window.location.href = "http://www.icloud.com/topsites_preview/";
};

ソース： http： //blog.raffael.me/post/18565169038/defining-how-your-website-looks-like-in-safari-topsites

于 2012-06-18T02:59:22.507 に答える
6

実際、Safariは<link>タグなどを検索しません。使用できるものは2つあります。

  • PHPでの着信リクエストのHTTPヘッダー。

  • JavaScriptwindowのオブジェクトのプロパティ。

2つの方法は非常にうまく機能し、確実に使用したい場合は、いずれか、または両方を使用できます。

PHP：

HTTPヘッダーを調べると、リクエストを送信するのがSafari Top Sites PreviewX_PURPOSEである場合、に設定されていることがわかりpreviewます。次に、通常のWebサイトに書き込む必要があります。

if($_SERVER["HTTP_X_PURPOSE"]=="preview")
{
    header("Location:thumbnail link");//Redirect to the thumbnail.
}
//Display the normal website.

そして、サムネイルがあるページに追加することができます：

if($_SERVER["HTTP_X_PURPOSE"]!="preview")
{
    header("Location:normal link");//Redirect to the normal website.
}
//Display the thumbnail.

Safariトップサイトプレビュー以外ではサムネイルが表示されないようにします。

JavaScript：

window.navigator.loadPurposeWebサイトを開こうとするSafariTopSitesPreviewpreviewの場合に値があります。ただし、通常のビューでは存在しません。したがって、この値をテストするときは、このプロパティの存在そのものとその真実性をテストする必要があります。次に、これは通常のWebサイトのコードです。window.navigator

if(window.navigator&&window.navigator.loadPurpose==="preview")
{
    window.location.href="thumbnail link";//Redirect to the thumbnail
}

サムネイルページの場合：

if(!window.navigator||window.navigator.loadPurpose!=="preview")
{
    window.location.href="normal link";//Redirect to the normal website
}

私からのちょっとしたトリック：

<link>本当にタグを付けたい場合は、次のように書くことができます。

<link rel="safari-preview" href="thumbnail link" />

そして、ヘッドセクションの最後に追加します。

<script>for(var i=0,link=document.getElementsByTagName("link"),l=link.length;i<l;i++)if(link[i].getAttribute("rel")==="safari-preview"&&window.navigator&&window.navigator.loadPurpose==="preview")window.location.href=link[i].getAttribute("href");</script>

出典：

于 2012-06-18T10:36:21.653 に答える
0

Apple Touchデバイスは、Webサーバーで合成済みの画像を探すことができます。これらの画像をクエリできることはわかっています。

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png

iCloud.comのソースをチェックすると、<link />これらのリソースを指す要素も含まれていることがわかります（ルートにないため）。

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/system/cloudos/en-us/1JPlus21/source/resources/images/apple-touch-icon-114x114.png">

ここで推測しているだけですが、サファリはトップサイトビューに表示する同じ画像を探しているのかもしれません。

これらのタイプの画像の詳細については、こちらをご覧ください

http://theksmith.com/technology/howto-website-icons-browsersdevices-favicon-apple-touch-icon-etc/

于 2012-06-16T01:03:58.173 に答える
0

読み込みが完了すると、プログラムでページのスナップショットを取得すると思います。そして、上部のプログレスバーを見ると、iCloudがそれを示しているとき（iCloudロゴだけ）、ロードが完了し、小さなアニメーションを実行しています。

于 2012-06-15T18:30:01.043 に答える
0

彼らは特にiCloudサービスのためにそれを作ったと思います。彼らはドメインがicloudドメインであるかどうかをチェックし、そうである場合は通常のサイトプレビューの代わりにこのロゴを表示します。

于 2012-06-15T21:39:11.127 に答える