seamless HTML5 iFrame Nahtloses Attribut




iframe seamless (8)

Es ist möglich das Attribut semless zu verwenden, hier habe ich einen deutschen Artikel http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html

und hier sind eine weitere Präsentation zu diesem Thema: http://benvinegar.github.com/seamless-talk/

Sie müssen die window.postMessage-Methode verwenden, um zwischen dem übergeordneten Element und dem Iframe zu kommunizieren.

In HTML5 hat der Iframe neue Attribute wie "seamless", die Ränder und Bildlaufleisten entfernen sollten. Ich habe es ausprobiert, scheint aber nicht zu funktionieren. Ich kann weiterhin Bildlaufleisten und Ränder sehen (ich verwende Google Chrome als Browser), hier mein Code:

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

Irgendeine Idee, warum es nicht funktioniert?

Noch eine Frage, ist es möglich, einen bestimmten Bereich der Seite innerhalb des Iframes zu erreichen?


Gemäß der neuesten W3C HTML5-Empfehlung (die wahrscheinlich der endgültige HTML5-Standard ist), die heute veröffentlicht wurde, gibt es kein seamless-Attribut mehr im Iframe-Element . Es scheint irgendwo im Standardisierungsprozess entfernt worden zu sein.

Laut caniuse.com kein großer Browser dieses Attribut (mehr), daher sollten Sie es wahrscheinlich nicht verwenden.



Ich dachte, das könnte für jemanden nützlich sein:

In der Chrome-Version 32 wird automatisch ein 2-Pixel-Rahmen um Iframes ohne das Seamless-Attribut angezeigt. Es kann leicht entfernt werden, indem diese CSS-Regel hinzugefügt wird:

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

Chrome verwendet den gleichen Selektor mit diesen Standard-User-Agent-Stilen:

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;
}

Immer noch bei 2014 nahtlose Iframe wird nicht vollständig von allen gängigen Browsern unterstützt, so sollten Sie nach einer alternativen Lösung suchen.

Im Januar 2014 wird der nahtlose Iframe für Firefox weder IE 11 noch von Chrome, Safari und Opera (der Webkit-Version) unterstützt.

Wenn Sie diese und weitere unterstützte Optionen im Detail überprüfen möchten, wäre die HTML5-Testseite eine gute Option:

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

Sie können verschiedene Plattformen überprüfen, im Punktebereich können Sie auf jeden Browser klicken und sehen, was unterstützt wird und was nicht.


Sie müssen nur schreiben

nahtlos

in deinem Code. Es gibt keine Notwendigkeit für:

nahtlos = "nahtlos"

Ich habe das gerade selbst herausgefunden.

BEARBEITEN - Scrollbalken werden nicht entfernt. Seltsam

scrolling = "no" scheint immer noch in html5 zu funktionieren. Ich habe versucht, die Überlauffunktion mit einem Inline-Stil wie von HTML5 empfohlen, aber das funktioniert nicht für mich.


Verwenden Sie das Frameborder-Attribut in Ihrem iframe und setzen Sie es auf frameborder = "0". Das ergibt das nahtlose Aussehen. Jetzt sagst du vielleicht, dass ich den verschachtelten iFrame lieber steuern möchte, ich habe Bildlaufleisten. Dann müssen Sie eine JavaScript-Skriptdatei erstellen, die die Höhe abzüglich aller Header berechnet und die Höhe festlegt. Debounce ist Javascript-Plugin erforderlich, um sicherzustellen, dass die Größenanpassung in älteren Browsern und manchmal Chrome funktioniert. Das bringt dich in die richtige Richtung.


Es wird noch nicht richtig unterstützt.

Chrome 31 (und möglicherweise eine frühere Version) unterstützt einige Teile des Attributs, wird jedoch nicht vollständig unterstützt.







attributes