跨浏览器 HTML5 iFrame答案

【问题标题】：Cross browser HTML5 iFrame跨浏览器 HTML5 iFrame
【发布时间】：2011-06-25 14:44:05
【问题描述】：

现在我有一个带有无缝属性的 iFrame 对象，看起来很完美，

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.google.com%2F&amp;layout=standard&amp;show_faces=false&amp;width=400&amp;action=like&amp;colorscheme=light&amp;height=35" seamless></iframe>

有几个 css 属性

iframe {
  overflow: hidden !important;
  border: none !important;
  width: 400px;
  height: 35px;
  background-color: #cce0da;
  text-align: right;
  padding-left: 20px;
}

然后对于 Internet Explorer，我使用一些 jQuery 应用了一些后备属性

$(function() {
  $('iframe', '.ie')
    .attr('allowTransparency', 'true')
    .attr('frameBorder', '0')
    .attr('scrolling', 'no');
});

我最终得到的是 IE 中带有不必要边框的透明 iFrame。

也许我的代码有问题？也许我对 frameBorder 属性的 DOM 操作在 document.ready 之后没有呈现？

【问题讨论】：

标签： jquery dom html cross-browser

【解决方案1】：

尝试直接在标记中添加“frameborder”属性...

<iframe frameborder="0"

【讨论】：

哈，真棒又有趣，我也是偶然发现的。谢谢！
现在我想知道是否有另一种方法可以在 dom 中获取此属性并使其渲染。 jQuery 和条件 cmets 不这样做。希望我的文档在 HTML5 中验证，frameborder 已过时。呸
是的，它肯定是一个已弃用的属性。我认为您可以选择：验证或正确渲染。我会说选择是显而易见的。

【解决方案2】：

请原谅我的英语，我在脚本 js 中使用此代码

这在 HEAD 部分

<!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
 <script src="myscrip"></script>
<![endif]-->

这是我的脚本

jQuery("iframe").each(function() {

  var copy = jQuery(this).clone();

  jQuery(copy).attr("frameborder", '0');
  jQuery(copy).attr("scrolling", 'no');

  jQuery(copy).replaceAll(this);

});

最好在

中添加脚本

jQuery(document).ready(function ()

小问题是用小刷新解决

 iframe css=display:none
 add in my script function .show after replaceAll

【讨论】：

使用了这个但将它链接起来：$(copy).attr({frameborder: '0',scrolling: 'no'}).replaceAll(this);

【解决方案3】：

如果您希望您的文档在 HTML5 中验证，您可以使用您原来的方法。要使其在 IE

1) 克隆 iframe，设置属性，然后附加到容器。或者从头开始创建 iframe 元素。 IE 就是不允许你事后设置属性。

2) 移除原来的 iframe。

    $('#facebook-like iframe').clone().attr({ 'frameBorder': '0', 'allowTransparency': 'true', 'scrolling': 'no' }).appendTo('#facebook-like');
    $('#facebook-like iframe').first().remove();

【讨论】：