踩到Window resize在Preview print的雷

最近在作案的過程中遇到一個狀況,從Art design那邊拿到的頁面,會在Window resize的時候執行某個Function,本來一切都正常,但測試到Chrome和Firefox預覽列印時發現也會Trigger這個Event,會讓在預覽列印過後的頁面發生問題,所以必須要進行修正,以下是這個案例的說明:

先在測試頁加入以下的程式,發現在預覽列印的時候會Trigger window resize event:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Preview Print Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(window).resize(function() {
            console.log("Window Resize");
        });
    </script>
</head>
<body>
<h1>Window Resize Test</h1>
</body>
</html>
Preview print trigger window resize event
Preview print trigger window resize event

網路上搜尋了一下解決方案,將Script改寫如下,可以順利解決,但不知道是不是最好的方法,如果大家有更好的也別忘了告訴我唷~

openResizeFn();

// Chorme
var print = false;
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (mql) {
    if (mql.matches) {
        closeResizeFn();
    } else {
        setTimeout(openResizeFn, 2000);
    }
});

// Firefox
window.onbeforeprint = function () {
    closeResizeFn();
};
window.onafterprint = function () {
    setTimeout(openResizeFn, 2000);
};

// Common Function
function openResizeFn() {
    $(window).on("resize", windowResize);
}

function closeResizeFn() {
    $(window).off("resize", windowResize);
}

function windowResize() {
    console.log("Window Resize");
}

You may also like...

9,256 Responses

  1. IgnacioSlima表示:

    Pharmacie Internationale en ligne: pharmacies en ligne certifiГ©es – pharmacie en ligne france livraison belgique

  2. tenevoy_qyma表示:

    Преимущества теневого плинтуса в декорировании помещения,
    Шаг за шагом инструкция по установке теневого плинтуса,
    Как использовать теневой плинтус для создания уникального интерьера,
    Модные тренды в выборе теневых плинтусов для современного дома,
    Как подобрать цвет теневого плинтуса к отделке стен,
    Безопасность и стиль: почему теневой плинтус – идеальное решение для дома,
    Интересные решения с теневым плинтусом и подсветкой: идеи для вдохновения,
    Теневой плинтус: элегантность и стиль в дизайне помещения,
    Почему теневой плинтус – важная деталь в оформлении интерьера
    профиль алюминиевый https://plintus-tenevoj-aljuminievyj-msk.ru/ .

  3. Если вы потеряли доступ
    к своему аккаунту на Kraken, не
    волнуйтесь! кракен это современный даркнет маркет плейс здесь вы найдете все текст Вот пошаговое руководство, которое поможет вам его восстановить: 1.

    Перейдите на страницу кракен сайт зеркала.
    2. Нажмите кнопку Восстановить доступ к аккаунту.
    3. Введите свой адрес электронной почты или имя пользователя.
    4. Укажите способ получения кода подтверждения
    (по электронной почте или SMS). 5. Введите полученный код в соответствующее поле.
    6. Создайте новый пароль. 7. Нажмите кнопку Войти.

  4. Allenacurf表示:

    Pharmacie Internationale en ligne: pharmacie en ligne – pharmacie en ligne france livraison belgique

  5. Biohlu表示:

    loratadine american – claritin pills splendid claritin pills style

  6. Недавно я наткнулся на статью о Лучших товарах на Кракене этого месяца.
    kraken онион Сначала я
    отнесся к этому скептически, но решил все же зайти и посмотреть.

    Каково же было мое удивление, когда я обнаружил множество эксклюзивных предложений на
    всевозможные товары — от электроники до
    одежды и kraken онион. Общение с менеджерами
    было невероятно профессиональным и полезным.
    Помогли сориентироваться в выборе и быстро оформить заказ.
    Я был поражен качеством товаров и скоростью доставки.
    С тех пор я стал постоянным покупателем
    на Кракене, где всегда нахожу лучшие предложения и уникальные
    товары. Это настоящий рай для любителей шоппинга!

  7. Allenacurf表示:

    pharmacies en ligne certifiГ©es: kamagra livraison 24h – pharmacie en ligne france fiable

  8. IgnacioSlima表示:

    п»їpharmacie en ligne france: Levitra acheter – Pharmacie sans ordonnance

  9. Allenacurf表示:

    pharmacie en ligne france livraison internationale: kamagra en ligne – Pharmacie Internationale en ligne

  10. Allenacurf表示:

    trouver un mГ©dicament en pharmacie: Levitra pharmacie en ligne – Pharmacie en ligne livraison Europe

  11. Allenacurf表示:

    Viagra sans ordonnance 24h: Viagra sans ordonnance 24h – Viagra pas cher livraison rapide france

  12. IgnacioSlima表示:

    acheter mГ©dicament en ligne sans ordonnance: acheter mГ©dicament en ligne sans ordonnance – Pharmacie Internationale en ligne

  13. Allenacurf表示:

    pharmacie en ligne: pharmacie en ligne sans ordonnance – pharmacie en ligne fiable

  14. RobertBlica表示:

    https://viaenligne.com/# Viagra Pfizer sans ordonnance

  15. Allenacurf表示:

    Pharmacie Internationale en ligne: Levitra pharmacie en ligne – pharmacie en ligne france livraison internationale

  16. IgnacioSlima表示:

    pharmacie en ligne avec ordonnance: levitra generique prix en pharmacie – pharmacie en ligne fiable

  17. Allenacurf表示:

    Quand une femme prend du Viagra homme: viagra sans ordonnance – Viagra sans ordonnance pharmacie France

  18. EdwardGROOM表示:

    vente de mГ©dicament en ligne: Levitra pharmacie en ligne – п»їpharmacie en ligne france

  19. Allenacurf表示:

    Viagra sans ordonnance 24h: Acheter du Viagra sans ordonnance – Viagra pas cher paris

  20. IgnacioSlima表示:

    trouver un mГ©dicament en pharmacie: pharmacie en ligne sans ordonnance – Pharmacie en ligne livraison Europe

  21. JseraldAposy表示:

    Доверенность На Получение Диплома Образец
    Выгодное устройство на работу с подтверждением, стоит ли покупать диплом – причины в пользу данного решения, достаточно ли знаний в образовательной сфере. У нас можно купить образцы москвы, спб и самых популярных вузов россии: московские университеты (имени ломоносова, мифи, международных отношений), санкт-петербургский государственный университет, национальный и новосибирский исследовательские университеты, университет нефти и газа имен губкина, федеральные университеты в казани и сибири и другие. Она никогда не передается в чужие руки, ведь от этого зависит безопасность компании и клиента. Специалист, анализирующий генетическую карту диплома, разрабатывающий индивидуальные программы его сопровождения (диагностика, профилактика, лечение) и предлагающий соответствующие страховые медицинские продукты. Как говориться, скоро сказка сказывается, да не скоро дело делается. Для многих людей, которые завершили обучение в колледже, но не имеют образца, получение высшего образования не представляется возможным.
    http://www.russkiy365-diploms-srednee.ru
    Диплом Купить В Москве
    Обычно поступление в университеты возможно на базе 11 классов школьного образования. Проверить диплом можно по следующим критериям: наличие подписей, штампов, присутствие водяных знаков и средств защиты, правильность указания фамилии и данных владельца. Наша компания гарантирует конфиденциальность и безопасность ваших данных, а также оперативную доставку диплома.
    Что Такое Справка Вызов На Сессию
    Например, продажа диплома о проф-переподготовке РУДН предусматривает возможность доказать наличие дополнительной квалификации у обладателя документа. Другой вопрос – если ваш возраст позволяет купить диплом только нового образца. Мы готовы изготовить диплом старого образца, о которым вы забыли и вспомнили в нужный момент. Знания, полученные в ВУЗе, часто лежат мертвым грузом и никак не вяжутся с опытом.

  22. mw3 cheats表示:

    Great write-up, I am regular visitor of one?s site, maintain up the excellent operate, and It’s going to be a regular visitor for a lengthy time.

  23. Ismaelfer表示:

    Свидетельство О Разводе Фото

    Свидетельство О Разводе Фото
    Обратите свидетельство, что до 1991 года ВУЗ назывался Московский государственный историко-архивный институт. Документ мы можем изготовить на любую специальность и любого года выпуска. Купить диплом РГГУ можно у нас за 24 часа. Планируете купить диплом МГУТУ. Наши специалисты используют в работе только настоящие бланки ГОЗНАК. У нас вы сможете выгодно приобрести качественный развод данного ВУЗа.
    http://https://gruppa365-diploms-srednee.ru
    Купить Диплом О Среднем Образовании В Екатеринбурге
    Для того, чтобы купить диплом бакалавра качественного образца, вам необходимо выполнить следующее: провести мониторинг рынка и выделить все компания, которые занимаются реализацией документов, прозвонить в каждую из них и если потребуется прийти на консультацию, выделить для себя ту, которая по вашим ощущениям, окажет вам качественные услуги. Так вы избежите возможных ошибок при покупке диплома специалиста. И, будьте уверенны, вы станете специалистом в интересующей отрасли благодаря нам и своему упорству.
    Когда Выдают Аттестат За 9 Класс 2017
    Во-вторых, обучение в колледжетехникуме составляет всего 3 года. Если Вы решили купить диплом магистра, то Вы должны понимать, что это не так просто, как может показаться на первый взгляд. Чтобы ускорить время свидетельства О Разводе Фото, мы задействуем услуги надежной курьерской службы в Москве и Санкт-Петербурге. Если вы относитесь к категории первых и вам повезло найти ответственного исполнителя, то счастливый билет у вас в кармане.

  24. Ilcjjr表示:

    dapoxetine awaken – priligy standard dapoxetine carrot

  25. Allenacurf表示:

    pharmacie en ligne livraison europe: kamagra pas cher – pharmacie en ligne

  26. IgnacioSlima表示:

    Viagra 100 mg sans ordonnance: Acheter du Viagra sans ordonnance – Viagra femme ou trouver

  27. EdwardGROOM表示:

    pharmacie en ligne: cialis prix – Pharmacie Internationale en ligne

  28. Lqruap表示:

    valacyclovir pills bellow – valacyclovir pills dear valtrex call

  29. XRumer23obliz表示:

    Hello.

    This post was created with XRumer 23 StrongAI.

    Good luck 🙂

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。