踩到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,266 Responses

  1. Hi 88表示:

    Hi, possibly i’m being a little off topic here, but I was browsing your site and it looks stimulating. I’m writing a blog and trying to make it look neat, but everytime I touch it I mess something up. Did you design the blog yourself?

  2. Barrybib表示:

    buy cialis pill: MaxPillsForMen.com – п»їcialis generic

  3. We can see that we need to develop policies to deal with this trend.

  4. Thanks for sharing the information. I found the information very useful. That’s a awesome story you posted. I will come back to scan some more.

  5. Donaldabula表示:

    ed pills cheap cialis online ed pharmacy

  6. Charlesbot表示:

    https://fastpillseasy.com/# online ed treatments

  7. Charlesbot表示:

    https://maxpillsformen.com/# Generic Cialis price

  8. I would share your post with my sis.

  9. BrettTIT表示:

    sildenafil over the counter: FastPillsForMen.com – best price for viagra 100mg

  10. Donaldabula表示:

    cheapest ed pills FastPillsEasy ed prescription online

  11. This adds to the expense of a solar energy system, since it can’t generate power 24/7.

  12. Hi88表示:

    Enjoyed reading through this, very good material. Thanks!

  13. Charlesbot表示:

    http://maxpillsformen.com/# п»їcialis generic

  14. Donaldabula表示:

    best online ed treatment fast pills easy ed online treatment

  15. Gregorygot表示:

    blacksprut darknet – blacksprut com ссылка, блекспрут онион

  16. AndreLig表示:

    Welcome to DeBank: Your Premier DeFi Portfolio Manager
    In the ever-evolving world of decentralized finance (DeFi), managing and tracking your digital assets is crucial. DeBank offers an innovative solution for users to seamlessly manage their DeFi investments, providing a comprehensive overview of their digital portfolio.
    debank portfolio
    Why Choose DeBank for Your DeFi Needs?
    DeBank simplifies the complex landscape of DeFi by offering tools and insights that empower users to make informed decisions. Here’s why you should consider using DeBank:

    Comprehensive Asset Management: Track all your DeFi investments in one place for a holistic view of your financial health.
    Portfolio Optimization: Enhance your investment strategy with the help of detailed analytics and insights.
    Security and Privacy: Enjoy peace of mind knowing your data is protected with top-tier security protocols.
    Key Features of DeBank
    DeBank stands out with its robust set of features designed to accommodate both novice and experienced investors alike:

    Real-time Data Tracking: Stay updated with live data feeds that keep you informed about market trends and price changes.
    Wallet Integration: Connect multiple crypto wallets to manage and view your assets seamlessly.
    Customizable Dashboard: Tailor your dashboard to display the metrics and assets that matter most to you.
    Getting Started with DeBank
    Setting up your DeBank account is a straightforward process:

    Create an Account: Sign up with your email or integrate with your crypto wallet.
    Connect Your Wallet: Securely link your existing crypto wallets to start tracking your investments.
    Explore the Dashboard: Customize your interface to monitor your DeFi activities effectively.
    DeBank offers an intuitive and user-friendly platform that caters to the diverse needs of DeFi enthusiasts. Whether you’re looking to track your assets or optimize your investment strategy, DeBank provides the tools and insights needed to succeed in the DeFi space.

    Join the DeFi Revolution with DeBank
    As the DeFi market continues to expand, staying ahead is crucial. DeBank equips you with the knowledge and tools to harness the full potential of decentralized finance. today and take control of your financial future!

  17. Barrybib表示:

    Buy generic 100mg Viagra online: buy viagra online – buy viagra here

  18. BrettTIT表示:

    online erectile dysfunction pills: buy erectile dysfunction pills – online erectile dysfunction prescription

  19. RogerFaf表示:

    http://maxpillsformen.com/# cialis for sale

  20. BrettTIT表示:

    best price for viagra 100mg: buy viagra online – Sildenafil 100mg price

  21. ThomasOdoke表示:

    What is Curve Finance?
    Curve Finance is a decentralized exchange platform designed to facilitate low-cost, low-slippage trades of stablecoins and other assets. Built on the Ethereum network, Curve.fi optimizes trading and liquidity provision, making it a popular choice among decentralized finance (DeFi) users.
    curve fi
    How Does Curve Finance Work?
    Curve Finance employs an automated market maker (AMM) model, which eliminates the need for traditional order books. Instead, it uses liquidity pools to match trades and provide liquidity. This system is particularly effective for stablecoin exchanges, where price fluctuations are minimal.

    Key Features of Curve Finance
    Low Slippage: By focusing on stablecoins, Curve minimizes price volatility during trades.
    Efficient Trading: Curve’s AMM model enables quick and efficient transactions.
    Liquidity Incentives: Users providing liquidity earn rewards in the form of trading fees and CRV tokens.
    Benefits of Using Curve Finance
    Curve Finance offers numerous benefits for users looking to optimize their cryptocurrency trading experience:

    Competitive Rates: By reducing slippage and transaction fees, Curve provides a cost-effective solution for stablecoin trades.
    Decentralized Control: Users benefit from the security and autonomy of a decentralized network.
    Yield Farming Opportunities: Beyond trading, users can engage in yield farming, earning additional income by supplying liquidity.
    How to Get Started with Curve Finance
    To begin using Curve, you need an Ethereum wallet, such as MetaMask, and some ETH to cover gas fees. Here’s a quick guide to get you started:

    Connect your Ethereum wallet to Curve.fi.
    Select a trading pair from the available liquidity pools.
    Enter the amount you wish to trade or provide as liquidity.
    Confirm the transaction and pay the necessary gas fees.
    By following these simple steps, you can start taking advantage of the low-cost, low-slippage trades that Curve Finance offers.

    Conclusion
    Curve Finance is a robust platform for anyone looking to engage in efficient cryptocurrency trading. With its focus on stablecoins and low slippage, Curve.fi provides users with an optimized trading experience backed by the security of decentralized finance. Whether you’re a trader or a liquidity provider, Curve Finance offers tools and incentives to enhance your DeFi journey.

  22. RichardmUb表示:

    Welcome to Jumper Exchange
    Jumper Exchange is your one-stop destination for seamless cryptocurrency swaps. Dive into an unparalleled trading experience designed for both newcomers and veteran traders.
    jumper exchange
    Why Choose Jumper Exchange?
    Jumper Exchange stands out for several compelling reasons:

    User-Friendly Interface: Navigate through our platform with ease, whether you’re trading from a desktop or mobile device.
    Fast Transactions: Experience rapid transaction speeds that ensure you never miss out on market opportunities.
    Security First: Rest assured that our advanced security protocols protect your assets at all times.
    Wide Range of Cryptocurrencies: Access a diverse array of cryptocurrencies to swap and trade effortlessly.
    How to Start Trading
    Register for an account using a simple signup process.
    Verify your identity quickly and securely.
    Fund your account and start swapping your preferred cryptocurrencies.
    Our educational resources also provide you with insights and strategies to help you make informed trading decisions every step of the way.

    Join Our Community
    When you sign up with Jumper Exchange, you join a vibrant community of crypto enthusiasts eager to share experiences and insights. Participate in our forums, and stay updated with the latest news and trends.

    Support and Resources
    Our dedicated support team is available 24/7 to assist you with any questions or concerns. Access our comprehensive resource center for help guides, FAQs, and the latest platform updates.

    Make Jumper Exchange your go-to platform for a streamlined, secure, and efficient crypto trading experience.

  23. LarryGup表示:

    Welcome to Cow Swap: Your Gateway to Easy Crypto Trading
    In the ever-evolving world of cryptocurrency, Cow Swap has emerged as a reliable and efficient platform for traders. Whether you’re a seasoned investor or a newcomer to the crypto space, understanding how Cow Swap operates can enhance your trading experience.

    Why Choose Cow Swap?
    cow finance
    Cow Swap offers several benefits that make it a preferred choice for many traders:

    Decentralized Platform: Enjoy the security and privacy of trading on a decentralized exchange without any intermediaries.
    Cost Efficiency: Lower transaction fees compared to traditional exchanges.
    User-Friendly Interface: Simplifies the trading process, making it accessible for everyone.
    No Sign-Up Required: Start trading without the hassle of creating an account.
    How Cow Swap Works
    Cow Swap utilizes a unique approach named CoW Protocol (Coincidence of Wants). This protocol matches traders’ orders without requiring them to be actively involved in the trade execution process. Here’s how it works:

    Order Submission: Traders submit their buy or sell orders to the platform.
    Order Matching: The platform uses the CoW Protocol to match these orders based on the best possible deal.
    Settlement: Once a match is found, the trade is executed swiftly and securely.
    Tips for Getting Started on Cow Swap
    To make the most out of your Cow Swap experience, consider the following tips:

    Stay Informed: Always check the latest trends and market updates to make informed decisions.
    Secure Your Assets: Utilize hardware wallets for added security of your funds.
    Use Test Networks: Familiarize yourself with the platform using test networks before making large transactions.
    Frequently Asked Questions
    Many traders have questions when first encountering Cow Swap. Here are a few common queries:

    Is Cow Swap safe to use?
    Yes, Cow Swap is designed with top-notch security, utilizing the decentralized nature of blockchain technology to keep your transactions safe.

    Do I need a wallet to use Cow Swap?
    Yes, you will need a compatible cryptocurrency wallet to connect and trade on Cow Swap.

    What cryptocurrencies can I trade on Cow Swap?
    Cow Swap supports a wide variety of cryptocurrencies, allowing you to trade your preferred coins seamlessly.

    By leveraging the strengths of Cow Swap, traders can efficiently and securely navigate the crypto landscape. Start exploring the possibilities today and enhance your trading experience!

  24. ThomasZep表示:

    Welcome to Bungee Exchange
    In the dynamic world of cryptocurrency, the ability to exchange currencies securely and efficiently is crucial. Bungee Exchange offers a seamless platform that caters to both beginners and experienced traders alike.
    bungee bridge
    Why Choose Bungee Exchange?
    Bungee Exchange stands out as a top choice for currency swaps due to its:

    User-Friendly Interface: Designed with simplicity in mind, the platform allows users to navigate with ease.
    Robust Security Measures: Your transactions are protected with state-of-the-art security protocols.
    Wide Range of Supported Currencies: Bungee Exchange supports a variety of cryptocurrencies to meet diverse trading needs.
    Key Features
    Here are some key features that make Bungee Exchange an attractive choice:

    Instant Transactions: Benefit from quick processing times that facilitate rapid exchanges.
    Competitive Exchange Rates: Receive favorable rates that maximize the value of your trades.
    24/7 Customer Support: Access reliable support whenever you need assistance or have queries.
    How to Use Bungee Exchange
    Getting started with Bungee Exchange is straightforward. Follow these steps:

    Sign Up: Create an account by providing your email and setting a secure password.
    Verify Identity: Complete the KYC process to ensure safety and compliance.
    Select Exchange Pair: Choose the currencies you wish to swap.
    Confirm Transaction: Review the details and confirm your trade to initiate the exchange.
    Conclusion
    Whether you are a seasoned trader or just getting started, Bungee Exchange offers a streamlined platform for effective cryptocurrency swaps. With its emphasis on security, user-friendliness, and efficiency, you can trade with confidence. Discover the potential of Bungee Exchange today and take control of your cryptocurrency transactions with ease.

  25. Charlesbot表示:

    https://maxpillsformen.com/# Buy Cialis online

發佈留言

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