VPF::поймать onload при перезагрузке страницы в iframe

Се ля ви

Дата 5.10.2010, 18:31 (ссылка)

(нет голосов)

Загрузка ...

Java/SOAрхитектор

Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127

Нужно сделать так, что бы в iframe показывались определённые страницы, по списку, после этого плавно прокручивались и, когда iframe доходит до конца прокрутки, в нём нужно обновить стрницу и снова прокручивать и т.д. Когда список заканчивается - нужно начинать его сначала (вечный цикл).

Получилось что-то типа этого:

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>{title}</title>

    <link type="text/css" rel="stylesheet" href="_styles/style.css" />

</head>

<body>

    <iframe id="Scrolling" src="{url-1}"></iframe>

    <script type="text/javascript" src="_scripts/script.js"></script>

</body>
</html>

_scripts/script.js:

Код

var /* @type {number} */ SCROLL_STEP = 1, //px/SHOW_TIME
    /* @type {number} */ SCROLL_SPEED = 20, //in milliseconds
    /* @type {Array<String>} */ URLS = [
        '{url-1}',
        '{url-2}',
        '{url-3}',
        '{url-4}',
        '{url-5}',
        '{url-6}'
    ],
    /* @type {number} */ active = 0;

addEventListener("load", scrolling, false );

function scrolling(scrollWindow) {

    var /* @type {HTMLIFrameElement} */ scrollWindow = frames['Scrolling'],
        /* @type {number} */ height = scrollWindow.document.body.scrollHeight -
                                      parseInt(getComputedStyle(document.getElementById('Scrolling')).height), // разница страницы и фрейма по высоте

        /* @type {number} */ intervalID = setInterval((function() {

            scrollWindow.scrollBy(0, SCROLL_STEP);
            if ((height -= SCROLL_STEP) < SCROLL_STEP) {
                clearInterval(intervalID);
                scrollWindow.addEventListener("load",
                    //scrolling,
                    function() {
                        alert('!');
                    },
                    false
                );

                scrollWindow.onload = function(){ alert('!!'); }

                scrollWindow.location.replace(URLS[active = (active + 1) % URLS.length]);

                scrollWindow.addEventListener("load",
                    //scrolling,
                    function() {
                        alert('!!!');
                    },
                    false
                );

                scrollWindow.onload = function(){ alert('!!!!'); }
            }
        }), SCROLL_SPEED);
};

Первый раз оно работает нормально - в iframe что нужно грузится, событие срабатывает, страница плавно прокручивается, но после того, как доходит до конца и нужно перегружать на новую по списку - новый листенер события "load" (onload) не срабатывает (точнее, видимо, не навешивается): ни одного, ни двух, ни трёх, ни четырёх восклицательных знаков в алерте я не вижу, а нужен хотя бы один из этих алертов. Пробовал вызов "replace" заменить на присваивание нового урла location.href`у - та же фигня. Тестировал в IE9beta, Chrome, Opera, Safari (FF4b6 почему-то на этом глючит, но firebug`а под него пока не адаптировали, так что сказать, что там ему не нравится, трудно...)

По условию задачи прописывать что-то внутрь загружаемой страницы я не могу - это закрытая система. Мне всё нужно с ней сделать как бы извне.
Но плюс в том, что я могу выбрать любой браузер - мне нужно, что бы хотя бы где-то это работало...

--------------------

)
(
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...

Amphiluke

Дата 5.10.2010, 21:40 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Цитата(Се ля ви @ 5.10.2010, 22:31

)

Если постановка задачи именно такова, то несколько непонятно, зачем нужно всякий раз «перенавешивать» обработчик события load для iframe. Кажется, можно и вообще обойтись без него…

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>{title}</title>

    <link type="text/css" rel="stylesheet" href="_styles/style.css" />

</head>

<body>
    <iframe id="Scrolling" name="Scrolling" src="{url-1}"></iframe>

    <script type="text/javascript">
        var SCROLL_STEP = 1, //px/SHOW_TIME
            SCROLL_SPEED = 20, //in milliseconds
            URLS = [
                '{url-1}',
                '{url-2}',
                '{url-3}',
                '{url-4}',
                '{url-5}',
                '{url-6}'
            ],
            active = 0;
        if (window.addEventListener) {
            window.addEventListener("load", scrolling, false);
        } else {
            window.attachEvent("onload", scrolling);
        }
        
        function scrolling(e) {
            var ifrm = document.getElementById('Scrolling');
            var height = (ifrm.currentStyle) ? parseInt(ifrm.currentStyle.height) : parseInt(getComputedStyle(ifrm, null).height);
            var scrollWindow = frames['Scrolling'];
            var intervalID = setInterval(function() {
                try {
                    scrollWindow.scrollBy(0, SCROLL_STEP);
                    if (scrollWindow.document.documentElement.scrollHeight - 
                        scrollWindow.document.documentElement.scrollTop - height < SCROLL_STEP) {
                        scrollWindow.location.replace(URLS[active = (active + 1) % URLS.length]);
                    }
                } catch(e) {}
            }, SCROLL_SPEED);
        }
    </script>
</body>
</html>

Нет?

Се ля ви

Дата 5.10.2010, 22:45 (ссылка)

(голосов:1)

Загрузка ...

Java/SOAрхитектор

Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127

Действительно! Спасибо! Не знал, что браузер по-любас ждёт, пока загрузит документ.

Спасибо огромное! smile

+

P.S. По поводу стиля - я, конечно, в курсе, что спорить о стиле кода - дело крайне неблагодарное smile

, просто раньше я так же заплатки вставлял внутрь основного кода, но потом пришёл к тому, что код значительно легче поддерживать, когда он сделан правильно, по стандартам. И смотрится красивее и легче сосредоточиться на сути алгоритма. По-этому я завёл специальный служебный скрипт, который вставляю, если браузер не поддерживает стандарты - и в нём заставляю эти стандарты поддерживать насколько это возможно. Может быть, и тебе он пригодится - вот он:

Код

//IE patch for window.addEventListener
if ('attachEvent' in this && !('addEventListener' in this))
    addEventListener = function(eventName, handler) {
        attachEvent("on" + eventName, handler);
    };

//IE patch for CSSStyleSheet.cssRules
    if ('CSSStyleSheet' in window
        && !('cssRules' in CSSStyleSheet.prototype)
        && 'rules' in CSSStyleSheet.prototype)
            CSSStyleSheet.prototype.cssRules = CSSStyleSheet.prototype.rules;

//IE patch for window.getComputedStyle
if (!('getComputedStyle' in window))
    getComputedStyle = function(element, pseudoclass) {
        if (pseudoclass === null || typeof pseudoclass === Types.UNDEFINED_TYPE)
            return element.currentStyle;
        else
            throw new Error("We are in IE, so we haven`t way to get pseudoclass styles of element");
    };

// Provide the XMLHttpRequest class for IE 5.x-6.x:
if (!('XMLHttpRequest' in window)
    || typeof XMLHttpRequest === Types.UNDEFINED_TYPE)
    /**
     * @constructor
     */
    XMLHttpRequest = function() {
        try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch(e) {};
        try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch(e) {};
        try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {};
        try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {};
        throw new TypeError( "This browser does not support XMLHttpRequest." );
    };

Вставив его конструкцией

Код

, можно после этого почти не париться по поводу заморочек IE до 9-ки и сосредоточиться на решении задачи по стандартам. smile

--------------------

)
(
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...

Amphiluke

Дата 5.10.2010, 23:35 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Спасибо, пригодится. smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »