blocks|key|1024891|text|它还没有得到正确的支持。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1024892|Chrome+31+(可能还有更早的版本)支持该属性的某些部分，但并不完全支持。|1024893|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

It's not supported correctly yet.

Chrome 31 (and possibly an earlier version) supports some parts of the attribute, but it is not fully supported.

blocks|key|810322|text|根据今天发布的最新W3C+HTML5建议(很可能成为最终的HTML5标准)，no+seamless+attribute+in+the+iframe+element已经存在了。它似乎在标准化过程中的某个地方被删除了。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|810323|根据caniuse.com的说法，没有主流浏览器(不再)支持这个属性，所以你可能不应该使用它。|810324|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-iframe-element|1|http://caniuse.com/#search=seamless^0|12|17|0|0|2|B|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

According to the latest W3C HTML5 recommendation (which is likely to be the final HTML5 standard) published today, there is <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-iframe-element">no seamless attribute in the iframe element</a> anymore. It seems to have been removed somewhere in the standardization process.

According to <a href="http://caniuse.com/#search=seamless">caniuse.com</a> no major browser does support this attribute (anymore), so you probably shouldn't use it.

blocks|key|1024924|text|现在可以使用semless属性，我在这里找到了一篇德语文章http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1024925|下面是关于这个主题的另一个演示文稿：http://benvinegar.github.com/seamless-talk/|1024926|您必须使用window.postMessage方法在父进程和iframe之间进行通信。|1024927|entityMap|0|LINK|mutability|MUTABLE|url|http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html|1|http://benvinegar.github.com/seamless-talk/^0|T|1Z|0|0|I|17|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

It is possible to use the semless attribute right now, here i found a german article <a href="http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html" rel="noreferrer">http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html</a>

and here are another presentation about this topic: <a href="http://benvinegar.github.com/seamless-talk/" rel="noreferrer">http://benvinegar.github.com/seamless-talk/</a>

You have to use the window.postMessage method to communicate between the parent and the iframe.

blocks|key|1025016|text|我想这可能会对某些人有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1025017|在chrome版本32中，没有无缝属性的iframe周围会自动出现一个2像素的边框。可以通过添加以下CSS规则轻松将其删除：|1025018|iframe:not([seamless])+{+border:none;+}|code-block|syntax|javascript|1025019|Chrome使用具有以下默认用户代理样式的相同选择器：|1025020|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;
}|1025021|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I thought this might be useful to someone:

in chrome version 32, a 2-pixels border automatically appears around iframes without the seamless attribute.
It can be easily removed by adding this CSS rule:

<pre><code>iframe:not([seamless]) { border:none; }
</code></pre>

Chrome uses the same selector with these default user-agent styles:

<pre><code>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;
}
</code></pre>

blocks|key|810188|text|在iframe上使用帧边界属性，并将其设置为frameborder="0“。这就产生了无缝的外观。现在你可能会说，我想要嵌套的iframe来控制，而不是我有滚动条。然后，您需要创建一个JavaScript脚本文件，该文件计算高度减去任何标题并设置高度。Debounce是一个javascript插件，用来确保在较老的浏览器中适当地调整大小，有时在chrome中也是如此。这会让你走上正确的方向。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|810189|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Use the frameborder attribute on your iframe and set it to frameborder="0" . That produces the seamless look. Now you maybe saying I want the nested iframe to control rather I have scroll bars. Then you need to whip up a JavaScript script file that calculates height minus any headers and set the height. Debounce is javascript plugin needed to make sure resize works appropriately in older browsers and sometimes chrome. That will get you in the right direction.

blocks|key|810267|text|在2014年，并非所有主流浏览器都完全支持无缝iframe，因此您应该寻找替代解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|810268|到2014年1月，Firefox和IE+11仍然不支持无缝iframe，Chrome、Safari和Opera+(+webkit版本)都支持它|810269|如果您想详细检查此选项和更多支持的选项，HTML5测试站点将是一个很好的选择：|810270|http://html5test.com/results/desktop.html|offset|length|810271|你可以查看不同的平台，在评分部分，你可以点击每个浏览器，看看哪些支持哪些不支持。|810272|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|15|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@$H|W|I|X|1|Y]]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|G]]]]

Still at 2014 seamless iframe is not fully supported by all of the major browsers, so you should look for an alternative solution.

By January 2014 seamless iframe is still not supported for Firefox neither IE 11, and it's supported by Chrome, Safari and Opera (the webkit version)

If you wanna check this and more supported options in detail, the HTML5 test site would be a good option:

<a href="http://html5test.com/results/desktop.html" rel="nofollow">http://html5test.com/results/desktop.html</a>

You can check different platforms, at the score section you can click every browser and see what's supported and what's not.

blocks|key|810347|text|我找不到任何符合我要求的东西，因此我想出了这个脚本(取决于jQuery)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|810348|https://gist.github.com/invernizzie/95182de86ea9dc5daa80|offset|length|810349|它会将iframe调整为视区大小(考虑到更宽的内容)。它可以使用改进来使用视区高度而不是内容高度，在前者较大的情况下。|810350|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1K|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

I couldn't find anything that met my requirements, hece I came up with this script (depends on jQuery):

<a href="https://gist.github.com/invernizzie/95182de86ea9dc5daa80" rel="nofollow">https://gist.github.com/invernizzie/95182de86ea9dc5daa80</a>

It will resize the iframe to the viewport size (taking into account wider content).
It could use an improvement to use the viewport height instead of the content height, in the case that the former is bigger.

in HTML5 the iframe has new attributes like 'seamless' that should remove borders and scrollbars. I've tried it but doesn't seem to work, I still can see scrollbars and borders (I'm using Google Chrome as browser), Here's my code:

<pre><code>&lt;iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"&gt;&lt;/iframe&gt;
</code></pre>

Any idea why it's not working?

One more question, is it possible to target a specific section of the page inside the iframe?

HTML5 iFrame Seamless Attribute

jQuery

HTML5

在HTML5中，iframe有像“无缝”这样的新属性，可以去掉边框和滚动条。我已经尝试过了，但似乎不起作用，我仍然可以看到滚动条和边框(我正在使用Google Chrome作为浏览器)，以下是我的代码：<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"><

问HTML5 iFrame无缝属性
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5 iFrame无缝属性EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5 iFrame无缝属性
EN