Кросс-браузер HTML5 iFrame - PullRequest
       2

Кросс-браузер HTML5 iFrame

0 голосов
/ 13 сентября 2010

Сейчас у меня есть объект iFrame с атрибутом seamless, который выглядит идеально,

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

В итоге я получаю прозрачный iFrame в IE с ненужной границей.

Может быть, проблема с моим кодом? Может быть, мои DOM-манипуляции с атрибутом frameBorder не отображаются после document.ready?

Ответы [ 3 ]

2 голосов
/ 13 сентября 2010

Попробуйте добавить атрибут frameborder непосредственно в разметку ...

<iframe frameborder="0"
1 голос
/ 20 июня 2011

Извините за мой английский, я использую этот код в скрипте 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
0 голосов
/ 25 июня 2011

Если вы хотите, чтобы ваш документ проходил проверку в HTML5, вы можете использовать свой оригинальный метод.Есть несколько вещей, которые нужно сделать, чтобы он работал в IE <9: </p>

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();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...