根据屏幕宽度条件加载JavaScript脚本教程-js教程-PHP中文网

根据屏幕宽度条件加载JavaScript脚本教程

心靈之曲

发布： 2025-09-27 12:11:01

原创

940人浏览过

根据屏幕宽度条件加载JavaScript脚本教程

本教程详细阐述如何利用JavaScript的window.innerWidth属性，实现特定脚本（如广告单元）的条件加载，使其仅在满足特定屏幕宽度（例如桌面端800px及以上）时执行。这种方法能有效避免脚本在移动设备上造成布局干扰，优化用户体验，并提供清晰的代码示例和实施要点。

在现代网页开发中，优化跨设备的用户体验至关重要。有时，某些第三方脚本，特别是广告单元或复杂交互组件，可能在桌面端表现良好，但在移动设备上却可能因占用过多屏幕空间或与现有布局冲突而严重影响用户体验。由于这些脚本通常以<script>标签形式引入，并直接操作dom，单纯通过css媒体查询来隐藏它们往往无法阻止其加载和执行，从而依然可能消耗资源或产生布局偏移。因此，我们需要一种机制来根据屏幕尺寸决定是否加载并执行这些脚本。

基于屏幕宽度的脚本条件加载

解决上述问题的核心思路是利用JavaScript在客户端检测当前的屏幕或视口宽度，然后根据预设的条件来决定是否插入并执行目标脚本。window.innerWidth属性是实现这一目标的理想选择，它返回浏览器视口的内部宽度（以像素为单位）。

实现原理

通过将目标脚本的执行逻辑包裹在一个条件判断语句中，我们可以在脚本加载时立即检查当前视口宽度。如果宽度满足特定条件（例如大于或等于800像素），则执行脚本；否则，脚本将不会被触发，从而避免在不适用的设备上产生影响。

实施步骤

确定条件： 首先，明确脚本应在何种屏幕宽度下执行。在本例中，我们设定为当视口宽度大于或等于800像素时执行。
包裹目标脚本： 将需要条件加载的第三方脚本（通常是一段立即执行的匿名函数或直接的脚本代码）放入一个if语句块中。
使用window.innerWidth： 在if语句的条件部分，使用window.innerWidth >= 800来判断当前视口宽度是否满足要求。

代码示例

假设您有一个广告单元脚本，其原始形式如下：

<script>(function(d,z,s){s.src='https://'+d+'/400/'+z;try{(document.body||document.documentElement).appendChild(s)}catch(e){}})('mutcheng.net',5555555,document.createElement('script'))</script>

登录后复制

为了使其仅在屏幕宽度大于或等于800像素时加载和执行，您可以将其修改为：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

立即学习“Java免费学习笔记（深入）”；

<script>
    if (window.innerWidth >= 800) {
        (function(d,z,s){
            s.src='https://'+d+'/400/'+z;
            try{
                (document.body||document.documentElement).appendChild(s)
            }catch(e){
                // 错误处理，例如当body或documentElement不存在时
                console.error("无法将脚本添加到DOM:", e);
            }
        })('mutcheng.net',5555555,document.createElement('script'))
    }
</script>

登录后复制

代码解析：

if (window.innerWidth >= 800)：这是核心条件判断。当浏览器视口的宽度大于或等于800像素时，条件为真，if语句块内的代码才会被执行。
(...)('mutcheng.net',5555555,document.createElement('script'))：这是原始的第三方广告脚本，它是一个立即执行函数表达式（IIFE），负责创建并插入广告脚本。
try...catch块：保留了原始脚本中的错误处理机制，以应对在尝试将脚本添加到DOM时可能发生的异常。

注意事项

替换您的脚本： 请务必将示例中的mutcheng.net广告脚本替换为您实际需要条件加载的脚本。
加载时机： 这种方法在页面首次加载时检查window.innerWidth。如果用户在加载后调整了浏览器窗口大小（例如从桌面模式缩小到移动模式，或反之），脚本的加载状态不会自动改变。如果需要动态响应窗口大小变化，您可能需要结合window.addEventListener('resize', ...)事件监听器来动态添加或移除脚本，但这会增加复杂性，对于大多数第三方广告脚本而言，初始加载时的判断通常已足够。
阈值选择： 800像素是一个常用的桌面/移动设备分界点，但您可以根据您的网站设计和目标受众调整这个阈值。
放置位置： 将这段条件加载脚本放置在HTML文档的<head>或<body>标签内，具体取决于原始脚本的最佳放置位置。通常，如果脚本需要尽早加载，可以放在<head>中；如果它依赖于DOM元素，则应放在<body>的末尾或使用DOMContentLoaded事件。