运行初始加载和更改时的 JS MediaQuery

Question

我只想为最小宽度为 1001 像素的屏幕尺寸加载特定的 JavaScript 代码段，以加快较小设备的加载时间。因此，我使用 MediaQuery 功能来识别最小宽度并对这样的变化做出反应：

            const mediaQuery = window.matchMedia('(min-width: 1001px)');
            mediaQuery.addEventListener('change', (event) => {
                if (event.matches) var t = (0, s.qs)(".js-twitter-feed");
                if ("undefined" != typeof twitterFeed && t) {
                    t.classList.remove("u-hide");
                    var r = document.createElement("div");
                    r.innerHTML = '<a class="twitter-timeline" data-height="500" href="https://twitter.com/'.concat(twitterFeed, '">Tweets by ').concat(twitterFeed, "</a>"), t.appendChild(r), (0, o.loadScript)("https://platform.twitter.com/widgets.js")
                }
            });

此代码段的问题在于，它仅在执行一次屏幕尺寸更改时加载包含的 Twitter 小部件，而不是在加载页面且最小宽度 1001px 已经为真时加载。这就是为什么我搜索另一个如下所示的解决方案：

if (matchMedia) {
    const mq = window.matchMedia("(min-width: 1001px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {

    var t = (0, s.qs)(".js-twitter-feed");
                        if ("undefined" != typeof twitterFeed && t) {
                            t.classList.remove("u-hide");
                            var r = document.createElement("div");
                            r.innerHTML = '<a class="twitter-timeline" data-height="500" href="https://twitter.com/'.concat(twitterFeed, '">Tweets by ').concat(twitterFeed, "</a>"), t.appendChild(r), (0, o.loadScript)("https://platform.twitter.com/widgets.js")
                        }
}

此代码还为宽度小于 1001 像素的屏幕尺寸加载 Twitter 小部件。我该如何解决？

Answer 1

您需要的是一个测试媒体查询的函数，您应在文档加载时调用一次，并将其添加为 mediaQuery 更改事件的处理程序。这是一个有效的示例代码：

<html>
<head>
<script>

function run()
{
    const contentDiv = document.getElementById("content");
    const mediaQuery = window.matchMedia("(min-width: 1001px)");
    function onMediaQueryChange()
    {
        if(mediaQuery.matches) contentDiv.innerHTML = "LARGE";
        else contentDiv.innerHTML = "small";
    }

    // will react on later changes
    mediaQuery.onchange = onMediaQueryChange;

    // will handle the initial browser window size
    onMediaQueryChange();
}

</script>
</head>
<body onload="javascript:run()">
<div id="content"></div>
</body>
</html>

您的代码可能如下所示（未测试）：

const mediaQuery = window.matchMedia('(min-width: 1001px)');
function mediaQueryChange(mediaQuery)
{
    if (mediaQuery.matches) var t = (0, s.qs)(".js-twitter-feed");
    if ("undefined" != typeof twitterFeed && t) {
        t.classList.remove("u-hide");
        var r = document.createElement("div");
        r.innerHTML = '<a class="twitter-timeline" data-height="500" href="https://twitter.com/'.concat(twitterFeed, '">Tweets by ').concat(twitterFeed, "</a>"), t.appendChild(r), (0, o.loadScript)("https://platform.twitter.com/widgets.js")
    }
};
mediaQuery.addEventListener('change', mediaQueryChange);
mediaQueryChange(mediaQuery);

运行初始加载和更改时的 JS MediaQuery

Run JS MediaQuery on initial load AND on change

javascript

width

media-queries

运行 初始加载和更改时的 JS MediaQuery

Run JS MediaQuery on initial load AND on change

javascript

width

media-queries

运行初始加载和更改时的 JS MediaQuery