JQuery или нет / Cross Browser Совместимые изменения размера iframe (IE, Chrome, Safari, Firefox) - PullRequest
Новая
       2

JQuery или нет / Cross Browser Совместимые изменения размера iframe (IE, Chrome, Safari, Firefox)

4 голосов
/ 26 марта 2012

Вот моя проблема. Я долго искал кросс-браузерный код для изменения размера iframe, и я просто не могу его найти. Все, что я видел, имеет проблемы в одном браузере над другим. Вот что я делаю. Я загружаю iframe на страницу в оверлейных инструментах jquery. Этот iframe загрузит содержимое страницы (в том же домене, поэтому не нужно беспокоиться о междоменном домене). Когда пользователь нажимает на действие в этой форме, iframe снова нужно будет изменить размер (у меня это работает, когда iframe увеличивается, но не когда iframe уменьшается).

У меня есть файл js, который включен в iframe с этой функцией 

$(window).load(function(){
    parent.adjust_iframe();
});

Затем эта функция вызывает функцию родительских страниц следующим образом: 

function adjust_iframe() {

    //i have tried both body and html and both dont work in IE
    var h = $("#overlayFrame").contents().find("body").height();
    if(h==0)
    h="500";
    else
    h=h+3;

    $("#overlayFrame").css({'height': h});
    window.scrollTo(0,0);

}

Приведенный выше код отлично работает в Chrome и Firefox, но не в IE.

Любая помощь здесь? Мне действительно нужно кросс-браузерное совместимое легковесное решение, которое не включает какой-либо тяжелый плагин jquery, который не поддерживается.

Спасибо!

Ответы [ 3 ]

0 голосов
/ 26 марта 2012

У меня есть 2 предложения:

Когда вы устанавливаете высоту CSS, явно указывайте в ней пиксели. 

$("#overlayFrame").css({'height': h + 'px'});

Когда ваш код iframe вызывает parent.adjust_iframe, отправьте текущую ширину / высоту. 

parent.adjust_iframe($('body').height());

Предложение БОНУС: проведите небольшое расследование и расскажите, какая версия IE и почему она не работает. Поместите туда несколько предупреждений и узнайте, получается ли высота, и т. Д.

0 голосов
/ 26 марта 2012

Я искал свои архивные файлы и нашел скрипт, который устанавливает новый размер окна iframe.Он работал на IE6, FF, ... 

/**
 * Parent
 */
<iframe id="myframe" name="myframe" ...>

<script type="text/javascript">
var iframeids=["myframe"];
if (window.addEventListener) {
  window.addEventListener("load", resizeCaller, false);
}else if (window.attachEvent) {
  window.attachEvent("onload", resizeCaller);
} else {
  window.onload=resizeCaller;
}
var iframehide="yes";
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 20 : 0;
function resizeCaller() {
  var dyniframe=new Array();
  for (i=0; i<iframeids.length; i++){
    if (document.getElementById)
      resizeIframe(iframeids[i]);
    if ((document.all || document.getElementById) && iframehide=="no"){
      var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
      tempobj.style.display="";
    }
  }
};

function resizeIframe(frameid){
  var currentfr=document.getElementById(frameid);
  if (currentfr && !window.opera){
    currentfr.style.display="";
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight)
      currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
    else if (currentfr.Document && currentfr.Document.body.scrollHeight)
      currentfr.height = currentfr.Document.body.scrollHeight;
    if (currentfr.addEventListener)
      currentfr.addEventListener("load", readjustIframe, false);
    else if (currentfr.attachEvent){
      currentfr.detachEvent("onload", readjustIframe);
      currentfr.attachEvent("onload", readjustIframe);
    }
  }
};
function readjustIframe(loadevt) {
  var crossevt=(window.event)? event : loadevt;
  var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement;
  if (iframeroot)resizeIframe(iframeroot.id);
};

function loadintoIframe(iframeid, url){
  if (document.getElementById)document.getElementById(iframeid).src=url;
};
</script>

/**
 * child iFrame html
 */
<body onResize="resizeIE()">
0 голосов
/ 26 марта 2012

Попробуйте 

$(window).load(function(){
    var bodyHeight = $('body').height();
    parent.adjust_iframe( bodyHeight );
});

и 

function adjust_iframe(newHeight) {

    //i have tried both body and html and both dont work in IE
    if(newHeight == 0) {
       newHeight = 500;
    } else {
       newHeight += 3;
    }

    $("#overlayFrame").css({'height': newHeight});
    window.scrollTo(0,0);
}

Потому что проблема, вероятно, в том, что страница не может получить доступ к содержимому iframes ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...