在初始加载和更改时运行 JS MediaQuery答案

【问题标题】：Run JS MediaQuery on initial load AND on change在初始加载和更改时运行 JS MediaQuery
【发布时间】：2020-09-12 09:02:07
【问题描述】：

我只想为最小宽度为 1001 像素的屏幕尺寸加载特定的 JavaScript sn-p，以加快较小设备的加载时间。因此，我使用 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")
                }
            });

这个 sn-p 的问题在于，它仅在执行一次屏幕尺寸更改时才加载包含的 Twitter 小部件，而不是在页面正在加载且 min-width 1001px 已经为 true 时加载。这就是为什么我寻找另一个看起来像这样的解决方案：

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 小部件。我该如何解决这个问题？

【问题讨论】：

标签： javascript media-queries width

【解决方案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);

【讨论】：

谢谢，但是否也可以在不更改 HTML 正文的情况下实现？
顺便说一句，在这里提出问题的最佳方式是我编写答案的方式 - 使用易于运行和测试的最小但完整的代码示例
您的新建议显示错误消息（尝试运行它）。
通过删除第 2 行（括号）中的“mediaQuery”解决了问题