如何从嵌入在Web应用程序中的iframe中删除边界?iframe的一个例子是:
1
| <iframe src="myURL" width="300" height="300">Browser not compatible.</iframe> |
我希望从我页面上的内容到EDOCX1[0]的内容的转换是无缝的,前提是背景色是一致的。目标浏览器仅限于IE6,不幸的是,其他浏览器的解决方案将无济于事。
添加frameBorder属性(注意大写‘b’)。
所以看起来像是:
1
| <iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe> |
在尝试删除IE7中的边框后,我发现frameborder属性区分大小写。
必须使用大写B设置frameborder属性。
1
| <iframe frameBorder="0"></iframe> |
根据iframe文档,frameborder被弃用,首选使用"border"css属性:
1
| <iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe> |
- 注:CSS border属性在IE6、7或8中未达到所需的结果。
除了添加frameborder属性之外,您可能还需要考虑将滚动属性设置为"否",以防止滚动条出现。
1
| <iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe > |
号
根据Dreamweaver的说法,对于特定于浏览器的问题,还添加了frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0":
1
| <iframe src="test.html" name="banner" width="300" marginwidth="0" height="300" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">Browser not compatible. </iframe> |
。
使用html iframe frameborder属性
http://www.w3schools.com/tags/att_iframe_frameborder.asp
注意:在IE中使用frameborder(cap b),否则将不起作用。但是,HTML5不支持iframe frameborder属性。所以,使用CSS。
1
| <iframe src="http://example.org" width="200" height="200" style="border:0"> |
还可以使用滚动属性删除滚动http://www.w3schools.com/tags/att_iframe_scrolling.asp
1
| <iframe src="http://example.org" width="200" height="200" scrolling="no" style="border:0"> |
。
也可以使用HTML5中新的无缝属性。iframe标记的无缝属性仅在opera、chrome和safari中受支持。当出现时,它指定iframe应该看起来像是包含文档的一部分(没有边框或滚动条)。到目前为止,只有Opera、Chrome和Safari支持标签的无缝属性。但在不久的将来,它将成为标准解决方案,并与所有浏览器兼容。http://www.w3schools.com/tags/att_iframe_无缝.asp
您可以在iframe代码中使用style="border:0;"。这是在HTML5中删除边框的建议方法。
查看我的HTML5 iframe生成器工具,在不编辑代码的情况下自定义iframe。
添加frameborder属性(大写"b")。
1
| <iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe> |
号
可以使用Style属性对于HTML5,如果要删除框架的boder或任何可以使用Style属性的内容。如下所示
这里是代码
1
| <iframe src="demo.htm" style="border:none;"></iframe> |
号
如果要放置iframe的页面的doctype是html5,则可以使用seamless属性,如下所示:
1
| <iframe src="..." seamless="seamless"></iframe> |
。
无缝属性上的Mozilla文档
您也可以用这种方式使用JavaScript。它将在IE和其他浏览器中找到任何iframe元素并删除它们的边框(尽管您可以在非IE浏览器中设置"border:none;"样式,而不是使用javascript)。即使在生成iframe并在文档中就位后使用(例如,以纯HTML而非javascript添加的iframe),它也会工作!
这似乎是可行的,因为IE创建了边框,而不是像您预期的那样在iframe元素上,而是在iframe的内容上——在BOM中创建iframe之后。($@&;*.@!!!!IE!!!!)
注意:如果父窗口和iframe来自同一来源(相同的域、端口、协议等),则IE部分(当然)只能工作。否则,脚本将在IE错误控制台中获得"拒绝访问"错误。如果发生这种情况,您唯一的选择是在生成之前设置它,正如其他人所指出的,或者使用非标准frameborder="0"属性。(或者让我看起来很轻松——我现在最喜欢的选择;)
我花了很多时间工作到绝望的地步才弄明白这一点…
享受吧。:)
1 2 3 4 5 6 7 8 9 10 11 12 13
| // =========================================================================
// Remove borders on iFrames
if (window.document.getElementsByTagName("iframe"))
{
var iFrameElements = window.document.getElementsByTagName("iframe");
for (var i = 0; i < iFrameElements.length; i++)
{
iFrameElements[i].frameBorder="0"; // For other browsers.
iFrameElements[i].setAttribute("frameBorder","0"); // For other browsers (just a backup for the above).
iFrameElements[i].contentWindow.document.body.style.border="none"; // For IE.
}
} |
。
我尝试了以上的所有方法,如果这对您不起作用,请尝试下面的CSS为我解决了这个问题。它只是告诉浏览器不要添加任何填充或边距。
1 2 3 4
| * {
padding:0px;
margin:0px;
} |
。
在样式表中添加
1 2 3 4 5 6
| {
padding:0px;
margin:0px;
border: 0px
} |
号
这也是一个可行的选择。
1
| <iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe> |
号
此代码在HTML4和HTML5中都可以使用。
如果您使用iframe来适应整个屏幕的宽度和高度,我假设您不是基于300x300大小,您还必须将正文页边距设置为"0",如下所示:
1
| <body style="margin:0px;"> |
号
同时设置border="0px"
1
| <iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe> |
号
尝试
1
| <iframe src="url" style="border:none;"></iframe> |
这将删除框架的边框。
使用这个
例子:
1
| <iframe src="your.html" style="border:none;"></iframe> |
。
添加frameborder属性,或者使用边框宽度为0px;的样式,或者将边框样式设置为"无"。
使用下面3中的任何一个:
1 2 3 4 5
| <iframe src="myURL" width="300" height="300" style="border-width:0px;">Browser not compatible.</iframe>
<iframe src="myURL" width="300" height="300" frameborder="0">Browser not compatible.</iframe>
<iframe src="myURL" width="300" height="300" style="border:none;">Browser not compatible.</iframe> |
若要删除边框,可以使用css border属性"无"。
1
| <iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe> |
号
其简单的只是在iframe标记frameborder=0中添加属性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <iframe src="URL" frameborder="0" width="100%" height="200">
<p>
Your browser does not support iframes.
</p>
</iframe>
<iframe frameborder="1|0">
(OR)
<iframe src="URL" width="100%" height="300" style="border: none">Your browser
does not support iframes.</iframe>
The <iframe> frameborder attribute is not supported in HTML5. Use CSS
instead. |
。
1 2
| iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx" |
使用firefox;)