Internet Explorer и случай очень странного поведения iFrame - PullRequest
5 голосов
/ 28 апреля 2009

У меня действительно ... bizzare ошибка ни в чем, кроме Internet Explorer с системой управления окнами, которую я разрабатываю. По сути, окна являются абсолютно позиционированными элементами div, содержащими элемент iFrame, который показывает свою страницу и изменяет размеры вместе с ними. Во всех других браузерах это работает нормально, как и предполагалось, но в IE iFrame не отображается ... правильно.

Мой оригинальный код для создания нового окна выглядит так:

function spawnNewWindow(url, title, type)
{
    //Does another window with that particular type already exist?
    //If so, just point it at the new link without actually spawning a new window.
    var cancelSpawn = false;
    if ( $('.windowType_'+type).length )
    {
        //Update the SRC attribute for the iframe contained within the window. This should effectively
        //reload the window too.
        $('.windowType_'+type).children("iframe").attr("src", "/darknova4/"+url);
    } else {


    //First, create the window
    $("body").append(
    "<div class='window'> \
    <div class='resizeArea'></div> \
    <div class='titlebar'>"+title+"</div> \
    <div class='closeWindow'></div> \
    <div class='windowContent newspawn'><iframe src='/darknova4/"+url+"' frameborder='0' width='100%' height='100%' scrolling='auto'></iframe></div> \
    </div>");

    //Move this window to the top of the stack
    $(".newspawn").parent(".window").css("z-index", windowZIndex++);

    //Set the data for this window's type, will be used to prevent copy windows being open later
    $(".newspawn").addClass("windowType_"+type);

    //Set up the window for moving and resizing and other stuff
    setupWindows();

    //Finally, remove the "newspawn" flag from the window, since it has content and we don't need work with it anymore.
    $(".newspawn").removeClass("newspawn");

    }
}

В Internet Explorer это создает пустое белое окно, которое указывает на невидимый iFrame, так как все мои оконные страницы имеют черный фон. Я подозревал знаменитую (и до сих пор не совсем исправленную) ошибку z-index, поэтому я внес следующие изменения, чтобы поиграть с порядком размещения и посмотреть, смогу ли я найти быстрое исправление:

$("body").append(
"<div class='window'> \
<div class='resizeArea'></div> \
<div class='titlebar'>"+title+"</div> \
<div class='closeWindow'></div> \
<div class='windowContent newspawn'><iframe style='position: relative;' src='/darknova4/"+url+"' frameborder='0' width='100%' height='100%' scrolling='auto'></iframe></div> \
</div>");

Обратите внимание на относительную позицию, которая должна быть по умолчанию для объектов, но не из-за ошибки стека. Что происходит с этим кодом, так это то, что появляются окна, отображается iFrame, и все выглядит хорошо, пока вы не попытаетесь его использовать. Я не могу объяснить почему, но наведение мышки на рамку приводит к тому, что исчезает . У меня нет кода на сайте, связанного с событием перемещения мыши, и нет кода на страницах iFrame, который заставлял бы его делать что-либо при наведении мыши. Это действительно странно. Кто-нибудь знает, почему он так себя ведет?

Если вам нужно убедиться в этом, я уже протестировал систему, реализованную на сайте www.darknovagames.com, которая прекрасно работает в Firefox, но, как уже упоминалось, действительно странна в IE. Я могу опубликовать больше кода, если вы думаете, что это поможет, но именно здесь я думаю, что ошибка. А именно, я был бы рад опубликовать CSS в родительском окне и JavaScript для событий мыши и т. Д.

Спасибо всем, кто может дать некоторое представление об этом странном поведении.

Ответы [ 2 ]

12 голосов
/ 28 апреля 2009

Попробуйте удалить position: relative из вашего HTML-элемента внутри iframe. Это, кажется, решает проблему в IE8 (и в режиме совместимости IE8).

Обновление: исправлена ​​ошибка с высотой

Добавление position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; в iframe устраняет проблему с высотой, вызванную вышеуказанным position: relative изменением в IE7 и IE8.

При наличии обоих исправлений iframe работает правильно в IE7, IE8 и IE8, эмулируя IE7 на моем компьютере.

0 голосов
/ 02 мая 2009

Я думаю, это как-то связано с проблемами техники шим в MS IE.

IFRAME является элементом без окон, поэтому z-индекс IFRAME может не синхронизироваться с контурным z-индексом DIV.

Подробнее см. http://support.microsoft.com/default.aspx?scid=http://support.microsoft.com:80/support/kb/articles/q177/3/78.asp&NoWebContent=1.

Пожалуйста, посмотрите на это .

(не удается правильно отобразить ссылку на MS KB с именем, возможно, это ошибка в SO).

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