踩到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...

17,287 Responses

  1. Charlesbot表示:

    http://fastpillseasy.com/# erectile dysfunction online

  2. I do not even know how I ended up here, but I thought this post was good. I do not know who you are but certainly you are going to a famous blogger if you are not already 😉 Cheers!

  3. Donaldabula表示:

    ed medication online cheap cialis ed doctor online

  4. срочно сделать загранпаспорт [url=www.doskamarta.borda.ru/?1-5-0-00000714-000-0-0-1735285881]срочно сделать загранпаспорт[/url] .

  5. RonnieCex表示:

    Welcome to Owlto Finance
    Owlto Finance is your ultimate partner for secure and efficient financial solutions. Whether you’re a personal investor or a large-scale business, we have the services that cater to your financial needs.
    owlto bridge
    Why Choose Owlto Finance?
    Choosing the right financial platform is crucial for safeguarding your investments and ensuring growth. Here are some reasons why Owlto Finance stands out:

    Security: Your assets’ safety is our top priority, employing state-of-the-art security measures to protect your finances.
    Efficiency: Our platform is designed for efficiency, ensuring that your transactions are processed seamlessly and quickly.
    User-Friendly Interface: Intuitive and easy to navigate, our platform simplifies your financial management.
    Our Services
    Owlto Finance offers a wide range of services tailored to your specific needs, whether you’re looking to invest, save, or manage your funds better.

    Investment Options: Choose from a variety of investment plans that align with your goals and risk tolerance.
    Savings Accounts: Flexible saving options to grow your money with competitive interest rates.
    Financial Advising: Get expert advice from our team of experienced financial advisors to navigate your financial future.
    Getting Started with Owlto Finance
    Starting your financial journey with Owlto Finance is easy and straightforward:

    Sign Up: Create your account in minutes with our streamlined registration process.
    Customize Your Portfolio: Select from our range of financial products to customize your portfolio according to your needs.
    Monitor and Adjust: Use our tools to track your financial progress and make adjustments as necessary.
    Join Our Community
    At Owlto Finance, you’re not just investing; you’re joining a community of like-minded individuals who value financial freedom and security. Join us today and take control of your financial future.

    For more information, visit our website and start your journey with Owlto Finance now!

  6. Jasonneelo表示:

    Welcome to dYdX: The Future of Decentralized Trading
    dYdX is a leading decentralized exchange (DEX) platform designed specifically for perpetual trading. Powered by a unique layer 2 solution, it offers zero gas fees and high-speed transactions, ideal for traders looking to maximize efficiency and minimize costs.
    dydx exchange
    Why Choose dYdX?
    Fully Decentralized: Enjoy complete control over your funds and trades with no third-party intervention.
    No Gas Fees: Thanks to our layer 2 integration, trade without worrying about expensive gas fees.
    Advanced Features: Utilize advanced trading features like cross-margining and isolated margin accounts to optimize your strategies.
    Getting Started with dYdX
    To start trading on dYdX, simply connect your wallet and begin trading a wide range of perpetual contracts. Our ensures that both novice and experienced traders can navigate and execute trades with ease.

    Trade Perpetual Contracts with Confidence
    Perpetual contracts are a powerful trading tool that allows you to speculate on the future price movements of a variety of cryptocurrencies without owning the underlying asset. With dYdX, you can:

    Leverage Up to 20x: Enhance your trading potential with leverage options tailored to your risk tolerance.
    Variety of Pairs: Trade a diverse selection of cryptocurrency pairs across multiple markets.
    Security at dYdX
    Your security is paramount at dYdX. Our platform employs state-of-the-art security measures to protect your assets and data, ensuring peace of mind with every trade you make.

    Join the dYdX Community
    Join a global community of traders who are revolutionizing the way decentralized finance operates. Stay updated and connected through our social media channels and community forums.

    Note: Always conduct thorough research and consider your risk tolerance before engaging in cryptocurrency transactions.

  7. Ramirokibly表示:

    Understanding Hop Exchange
    Hop Exchange is a groundbreaking platform designed to simplify the process of transferring cryptocurrencies across multiple blockchains. This guide will explore its functionality, benefits, and how you can make the most of its features.
    hop protocol
    What is Hop Exchange?
    Hop Exchange is a decentralized protocol that facilitates efficient and cost-effective cross-chain cryptocurrency transfers. It aims to solve the challenges of interoperability between blockchain networks, enabling seamless asset movement without compromising security or incurring high fees.

    Features of Hop Exchange
    Cross-Chain Compatibility: Easily transfer tokens across different blockchain networks.
    Low Transaction Fees: Enjoy minimized expenses compared to traditional bridging solutions.
    High-Speed Transfers: Experience rapid transaction confirmations and settlements.
    Secure Transactions: Rely on advanced security protocols to protect your assets.
    How Does Hop Exchange Work?
    Hop Exchange functions by employing liquidity pools and multi-chain bridges. When a user initiates a cross-chain transfer, the protocol uses these pools to swap assets between the source and destination chains, effectively minimizing transaction times and costs.

    Benefits of Using Hop Exchange
    Seamless Experience: Eliminate the hassle of navigating multiple platforms for asset transfers.
    Cost Savings: Reduce overhead costs associated with traditional exchanges and bridging services.
    Enhanced Security: Leverage advanced cryptographic techniques to safeguard your transactions.
    DeFi Integration: Integrate easily with decentralized finance platforms, broadening your investment opportunities.
    Getting Started with Hop Exchange
    To start using Hop Exchange, follow these simple steps:

    Connect your digital wallet to the Hop Exchange platform.
    Select the source and destination networks for your transfer.
    Input the amount of cryptocurrency you wish to move and authorize the transaction.
    Confirm the transfer and monitor the progress via the platform’s dashboard.
    With Hop Exchange, you can easily navigate the complex landscape of cryptocurrency with a tool that emphasizes efficiency, affordability, and security. Whether you are an individual investor or a business, Hop Exchange offers the flexibility needed to keep pace with the rapidly evolving blockchain ecosystem.

  8. Mariongaupe表示:

    Understanding Rhino Technology
    Rhino technology represents the forefront of digital finance solutions, offering innovative tools for both consumers and businesses. Designed to streamline processes and enhance user experience, Rhino technology stands out as a pivotal development in the financial world.
    rhino finance
    Features of Rhino Technology
    Scalability: Rhino technology is built to grow with user needs, supporting both small operations and larger enterprises with ease.
    Security: Integration of advanced security protocols ensures that transactions and data are protected from unauthorized access.
    User-Friendliness: With a focus on intuitive design, Rhino technology offers an interface that is easy for users of all levels to navigate.
    Applications of Rhino Technology in Finance
    In the financial sector, Rhino technology plays a crucial role in enhancing efficiency and ensuring compliance with industry standards. It empowers users with tools that simplify complex financial operations, making them more accessible and less time-consuming. Beyond financial transactions, Rhino technology aids in data analysis, helping businesses make informed decisions based on real-time analytics.

    In conclusion, Rhino technology is a transformative force in the financial industry. Its ability to provide scalable, secure, and user-friendly solutions positions it as a crucial player in digital finance. As industries continue to evolve, relying on such cutting-edge technology ensures that businesses remain competitive, efficient, and secure.

  9. срочное оформление загранпаспорта срочное оформление загранпаспорта .

  10. Hello this is a wonderful write-up. I’m going to e mail this to my friends. I came on this while searching on yahoo I’ll be sure to come back. thanks for sharing.

  11. Barrybib表示:

    generic sildenafil: Fast Pills For Men – Sildenafil Citrate Tablets 100mg

  12. Donaldabula表示:

    online ed medicine cheap ed ed medication online

  13. SpencerBag表示:

    Welcome to Dexscreener
    If you’re looking for comprehensive and real-time cryptocurrency market data, look no further than Dexscreener. With a plethora of tools at your disposal, you can analyze, trade, and excel in the ever-evolving world of cryptocurrencies.
    dex screener
    Features of Dexscreener
    Real-Time Data: Get the latest updates on cryptocurrency prices, market trends, and trading volumes.
    Comprehensive Charts: Utilize interactive charts to spot trends and make informed trading decisions.
    Customizable Alerts: Set alerts for when your favorite cryptocurrencies hit your chosen price points.
    Why Choose Dexscreener?
    Dexscreener stands out in the crowded field of cryptocurrency analysis tools for several reasons:

    Unmatched Accuracy
    Accuracy is king in the world of crypto trading. With Dexscreener, you can trust that you’re getting precise data, ensuring that every trading decision is backed by solid information.

    User-Friendly Interface
    Whether you’re a seasoned trader or a newcomer, Dexscreener’s intuitive interface makes it easy to navigate and utilize. The platform is designed to provide a seamless user experience.

    Community and Support
    Join a vibrant community of traders and investors. Dexscreener offers robust customer support to help you at every step of your trading journey. Whether you have a query or need detailed insight, our support team is there to assist.

    Getting Started
    Start your cryptocurrency trading journey with Dexscreener today. Sign up in a few simple steps and gain access to invaluable trading tools and insights right away.

    For more information, visit the Dexscreener website and discover how you can succeed in the cryptocurrency market!

  14. Charlesbot表示:

    http://fastpillsformen.com/# Buy generic 100mg Viagra online

  15. Diplomi_agml表示:

    купить аттестат за 9 класс дешево купить аттестат за 9 класс дешево .

  16. Sh bet表示:

    I think this is among the so much vital info for me. And i’m happy reading your article. But wanna remark on few common issues, The site style is wonderful, the articles is really excellent : D. Just right job, cheers

  17. RogerFaf表示:

    https://fastpillsformen.com/# over the counter sildenafil

  18. Donaldabula表示:

    Cialis 20mg price in USA MaxPillsForMen.com buy cialis pill

  19. RogerFaf表示:

    http://fastpillseasy.com/# ed online meds

  20. сколько стоит сделать загранпаспорт сколько стоит сделать загранпаспорт .

  21. неотложная наркологическая помощь [url=http://www.justforum.bestforums.org/viewtopic.php?f=26&t=4785]http://www.justforum.bestforums.org/viewtopic.php?f=26&t=4785[/url] .

  22. скорая наркологическая помощь [url=http://www.stranaua.ukrbb.net/viewtopic.php?f=2&t=59846]скорая наркологическая помощь[/url] .

  23. скорая наркологическая помощь в москве [url=http://www.honey.ukrbb.net/viewtopic.php?f=45&t=16764]скорая наркологическая помощь в москве[/url] .

發佈留言

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