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

  1. Donaldabula表示:

    discount ed meds fast pills easy erectile dysfunction medications online

  2. рейтинги производительности процессоров рейтинги производительности процессоров .

  3. рейтинги процессоров для пк https://www.topcpu.ru .

  4. GregoryJaf表示:

    An executive order designed to speed up the rebuilding of lost homes in LA has been put in place by California Governor Gavin Newsom.
    [url=https://kraken6gf6o4rxewycqwjgfchzgxyfeoj5xafqbfm4vgvyaig2vmxyd.com]kraken6gf6o4rxewycqwjgfchzgxyfeoj5xafqbfm4vgvyaig2vmxvyd.onion[/url]
    The order suspends Ceqa review and the California Coastal Act, which work to minimise the environmental impact of proposed building projects, as well as suspending some permits in order to make rebuilding quicker and more affordable.

    There are also protections against price gouging on services related to the fires such as building materials and storage services.

    He says “one thing I won’t give in to is delay. Delay is denial for people.”
    kraken6gf6o4rxewycqwjgfchzgxyfeoj5xafqbfm4vgvyaig2vmxvyd
    https://kraken6gf6o4rxewycqwjgfchzgxyfeoj5xafqbfm4vgvyaig2vmxvyd-onion.info
    “The executive order I signed today will help cut permitting delays, an important first step in allowing our communities to recover faster and stronger.”

  5. Eleven a.m. right this moment at Dove Witt Family Mortuary, 6630 S. Hwy.

  6. Rock Punch – Located after the first occasion of Arts 1. Its mismatch of properties recommend it is one other placeholder.

  7. BrettTIT表示:

    Buy generic 100mg Viagra online: Fast Pills For Men – Viagra Tablet price

  8. вывод из запоя в стационаре ростов http://vyvod-iz-zapoya-rostov222.ru/ .

  9. Charlesrot表示:

    Optimize Your Crypto Trading with TraderJoeXyz
    In the dynamic world of cryptocurrency, having the right tools at your disposal can make all the difference. Enter TraderJoeXyz, a cutting-edge platform designed to maximize your trading potential. By leveraging TraderJoeXyz, traders gain access to a multitude of features that cater to both beginners and seasoned professionals. Let’s explore how TraderJoeXyz can enhance your crypto trading journey.
    traderjoe xyz
    Features of TraderJoeXyz
    The TraderJoeXyz platform is packed with robust features aimed at simplifying and optimizing cryptocurrency trading:

    Advanced Trading Interface: The user-friendly interface is equipped with powerful tools to execute trades efficiently.
    Comprehensive Analytics: Gain insights with detailed analytics and customizable charts for better decision-making.
    Secure Wallet Integration: Seamlessly manage your crypto assets with integrated security measures.
    Automated Trading Bots: Use AI-driven bots to enhance your trading strategy with automated buy and sell actions.
    Benefits of Using TraderJoeXyz
    Here are some of the benefits you can expect when using TraderJoeXyz:

    Increased Efficiency: With streamlined processes and intuitive design, traders can execute trades faster than ever.
    Greater Profit Potential: Advanced tools and analytics help you identify profitable trading opportunities.
    Reduced Risk: Implementing secure wallet integrations and automated bots can help mitigate risks associated with trading.
    Enhanced Trading Experience: A seamless interface paired with powerful tools ensures an exceptional trading journey.
    Join the TraderJoeXyz Community
    TraderJoeXyz is more than just a platform; it’s a community of crypto enthusiasts and experts. Joining this community provides access to shared knowledge, support, and collaboration opportunities. To become part of this thriving ecosystem, simply and start exploring the world of crypto trading today.

    By choosing TraderJoeXyz, you’re not just trading—you’re transforming your crypto experience. Get started and make the most of your cryptocurrency assets.

  10. вывод из запоя цены ростов-на-дону вывод из запоя цены ростов-на-дону .

  11. рейтинг процессоров amd http://www.topcpu.ru .

  12. The Masked Dancer”: Yvonne Catterfeld als Rategästin im Finale”.

  13. нарколог на дом вывод из запоя ростов нарколог на дом вывод из запоя ростов .

  14. whoah this weblog is wonderful i like reading your articles. Keep up the good paintings! You already know, many people are looking around for this information, you can help them greatly.

  15. Charlesbot表示:

    http://maxpillsformen.com/# Generic Tadalafil 20mg price

  16. Donaldabula表示:

    generic ed meds online cheap cialis erectile dysfunction medicine online

  17. Scotthom表示:

    What is Uniswap?
    Uniswap is a decentralized exchange (DEX) protocol built on the Ethereum blockchain. It enables direct peer-to-peer cryptocurrency transactions, allowing users to trade coins without intermediaries. This makes it a cornerstone of the Decentralized Finance (DeFi) ecosystem.
    uniswap
    Benefits of Using Uniswap
    Uniswap offers several advantages over traditional, centralized exchanges:

    Decentralization: Users maintain control of their funds, minimizing the risk of hacking or fraud associated with central exchanges.
    Liquidity Pools: Uniswap uses automated liquidity pools instead of traditional order books, enabling seamless and efficient trading.
    Open Access: Anyone with an Ethereum wallet can trade on Uniswap, facilitating financial inclusivity.
    No Registration: Trade instantly without creating an account or passing through identity verification processes.
    How to Use Uniswap
    Getting started with Uniswap is simple and intuitive. Follow these steps:

    Create and fund an Ethereum wallet if you don’t have one. Some popular options include MetaMask, Trust Wallet, and Coinbase Wallet.
    Connect your wallet to the Uniswap platform by navigating to their website and initiating the connection process.
    Choose the tokens you wish to trade. Always ensure you are aware of the gas fees involved in the transaction.
    Initiate the swap and confirm the transaction in your wallet. Your new tokens will be available once the transaction is confirmed on the blockchain.
    Security Tips
    While Uniswap is a secure platform, it’s crucial to follow best practices to ensure your funds remain safe:

    Always ensure you are accessing the legitimate Uniswap website by verifying the URL.
    Keep your wallet’s private keys secure and never share them with anyone.
    Regularly update your cryptocurrency wallet and browser to prevent vulnerabilities.
    Conclusion
    Uniswap has revolutionized the way cryptocurrency trading operates by providing a secure, user-friendly, and inclusive platform. Whether you are a seasoned trader or a newcomer to the crypto world, Uniswap offers a powerful tool for navigating the DeFi landscape.

  18. The sheet would then be broken off the pipe and trimmed to type a rectangular window to fit into a frame.

  19. Barrybib表示:

    Generic Tadalafil 20mg price: Buy Cialis online – cheapest cialis

  20. PLUS loans are designed to offer additional financial support to parents who’re still masking nearly all of their child’s living expenses.

  21. ALT. Please Be aware: In some cases (i.e.

  22. Charlesbot表示:

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

  23. Discover out the solutions to at the very least two of these questions in the next section.

  24. Frankelava表示:

    Welcome to PancakeSwap: A Beginner’s Guide
    PancakeSwap is a decentralized exchange platform on the Binance Smart Chain, designed for swapping BEP-20 tokens. With its vibrant ecosystem, ease of use, and low transaction fees, it’s become a popular choice among crypto enthusiasts.
    pancakeswap finance
    What is PancakeSwap?
    PancakeSwap is an automated market maker (AMM) that allows users to trade directly from their crypto wallets. There’s no order book involved; instead, trades are made against a liquidity pool. Here’s how you can get started:

    How to Use PancakeSwap?
    Set Up Your Wallet
    First, you need a crypto wallet like MetaMask or Trust Wallet. Ensure your wallet supports BEP-20 tokens.
    Connect to Binance Smart Chain
    Configure your wallet to connect to the Binance Smart Chain network. Detailed guides are available in your wallet settings.
    Purchase BNB
    You’ll need BNB (Binance Coin) to cover transaction fees. Buy BNB from a reputable exchange and transfer it to your wallet.
    Access PancakeSwap
    Visit the official PancakeSwap website and connect your wallet by clicking on the ‘Connect Wallet’ button.
    Start Trading
    Once connected, you can begin swapping BEP-20 tokens. Choose the tokens you wish to trade and confirm your transactions.
    Benefits of PancakeSwap
    Lower Fees: Operating on Binance Smart Chain, the fees are more affordable than Ethereum-based exchanges.
    Fast Transactions: Experience quick transaction speeds due to the efficiency of BSC.
    Yield Farming: Earn rewards by providing liquidity or participating in various farming pools.
    Conclusion
    PancakeSwap offers a user-friendly approach to trading cryptocurrencies, engaging users with its gamified elements like lotteries and collectibles. Whether you’re a beginner or an experienced trader, PancakeSwap provides an efficient and exciting way to dive into the world of decentralized finance. Always ensure to perform your due diligence before engaging in trading activities.

    For more detailed guides and support, visit the .

發佈留言

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