web-dev-qa-db-ja.com

HTML5 iFrameシームレス属性

hTML5では、iframeに「シームレス」などの新しい属性があり、境界線とスクロールバーを削除する必要があります。私はそれを試してみましたが、機能していないようです、まだスクロールバーと境界線を見ることができます（Google Chromeを使用しています）、ここに私のコードがあります：

<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>

なぜ機能しないのか考えていますか？

もう1つの質問は、iframe内のページの特定のセクションをターゲットにすることは可能ですか？

html5iframeattributes
63
Mauro74

まだ正しくサポートされていません。

Chrome 31（およびおそらく以前のバージョン）は属性の一部をサポートしていますが、完全にはサポートされていません。

28
delphi

更新日：2016年10月

seamless属性はもう存在しません。当初、最初のHTML5仕様に含まれるように提案されていましたが、その後削除されました。同じ名前の無関係な属性がHTML5.1ドラフトで短いカメオを作りました しかしそれも は2016年半ばに捨てられました：

そのため、実装者側とweb-dev側の両方からの要点は、seamless as-speccedは誰もが望んでいたものではないようだということです。または、少なくとも実際に誰もが望んでいた以上のものです。とにかく@ annevkのように、Shadow DOMに照らして「イベントで克服する」ことが多くなっているようです。

言い換えると、メモリからseamless属性を削除し、存在しないふりをします。

後世のために、ここに5年前からの元の答えがあります。

元の回答：2011年4月

現在、属性はドラフトモードになっています。そのため、現在のブラウザはまだサポートしていません（実装が変更される可能性があるため）。それまでの間、CSSを使用してiframeから境界線/スクロールバーを削除することをお勧めします。

iframe[seamless]{
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

シームレス属性には、CSSで追加できるもの以上のものがあります。属性の背後にある理由の一部は、ネストされたコンテンツがiframeに適用される同じスタイルを継承できるようにすることでした例えば）。

最後に、Internet Explorer（8以前）のバージョンでは、境界線、スクロールバー、背景色を削除するために追加の属性が必要です。

<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>

当然、これは検証しません。だからそれを処理する方法はあなた次第です。私の（つまらない）アプローチは、エージェント文字列をスニッフィングし、IE 9より前のバージョンの属性を追加することです。

お役に立てば幸いです。 :)

117
user458541

本日公開された最新のW3C HTML5勧告（最終的なHTML5標準になる可能性が高い）によると、 iframe要素にシームレスな属性はありません があります。標準化プロセスのどこかで削除されたようです。

caniuse.com によると、主要なブラウザはこの属性をサポートしていません（もう）ので、おそらく使用すべきではありません。

53
Dynalon

今すぐsemless属性を使用することが可能です、ここでドイツ語の記事を見つけました http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html

このトピックに関する別のプレゼンテーションを次に示します。 http://benvinegar.github.com/seamless-talk/

親とiframeの間で通信するには、window.postMessageメソッドを使用する必要があります。

6
volf

iO8には、iframeシームレス属性のremovedサポートがあります。

  • Safari、HomeScreen、新しいWKWebViewおよびUIWebViewでテスト済み。

IOS 8のその他の変更に関する詳細とパフォーマンスのレビュー：

2
Tony O'Hagan

私はこれが誰かに役立つかもしれないと思った：

in chromeバージョン32では、シームレス属性なしで2ピクセルの境界線がiframeの周囲に自動的に表示されます。このCSSルールを追加することで簡単に削除できます。

iframe:not([seamless]) { border:none; }

Chromeは、これらのデフォルトのユーザーエージェントスタイルで同じセレクターを使用します。

iframe:not([seamless]) {
  border: 2px inset;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
}
2
Shahar

私は自分の要件を満たすものを見つけることができなかったので、このスクリプトを思いつきました（jQueryに依存）。

https://Gist.github.com/invernizzie/95182de86ea9dc5daa8

Iframeのサイズをビューポートのサイズに変更します（より広いコンテンツを考慮に入れます）。前者の方が大きい場合、コンテンツの高さの代わりにビューポートの高さを使用するように改善することができます。

0
Esteban

あなただけを書く必要があります

シームレス

あなたのコードで。以下の必要はありません。

seamless = "シームレス"

私は自分でこれを見つけました。

編集-これはスクロールバーを削除しません。妙に

scrolling = "no"はまだhtml5で機能するようです。 html5で推奨されているインラインスタイルでoverflow関数を使用しようとしましたが、これは機能しません。

0
Yagisanatode

Iframeでframeborder属性を使用し、frameborder = "0"に設定します。それはシームレスな外観を生成します。ネストされたiframeで制御したいというのではなく、スクロールバーがあります。次に、高さからヘッダーを差し引いて計算するJavaScriptスクリプトファイルを作成し、高さを設定する必要があります。デバウンスは、古いブラウザや場合によってはクロムでサイズ変更が適切に機能することを確認するために必要なJavaScriptプラグインです。それはあなたを正しい方向に導きます。

0
Alex Williams

それでも2014年には、シームレスなiframeはすべての主要なブラウザで完全にサポートされていないため、代替ソリューションを探す必要があります。

2014年1月までに、FirefoxではシームレスなiframeはまだサポートされていませんIE 11、Chrome、Safari、およびOpera（

これとサポートされているオプションを詳細に確認したい場合は、HTML5テストサイトが適切なオプションです。

http://html5test.com/results/desktop.html

さまざまなプラットフォームを確認できます。スコアセクションでは、すべてのブラウザーをクリックして、サポートされているものとサポートされていないものを確認できます。

0
Juan Carlos Alpizar Chinchilla