核心方法：<script>

无论在电脑还是手机上,嵌入 JS 代码最基本、最核心的方法都是通过 HTML 的 <script> 标签，主要有两种方式：

手机网页嵌入js代码怎么用
（图片来源网络，侵删）

内联脚本

直接将 JS 代码写在 HTML 文件内部，放在 <script> 和 </script> 标签之间。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">手机网页 JS 示例</title>
    <style>
        body { font-family: sans-serif; text-align: center; padding-top: 50px; }
        #myButton { 
            padding: 15px 30px; 
            font-size: 18px; 
            background-color: #007bff; 
            color: white; 
            border: none; 
            border-radius: 8px; 
            cursor: pointer;
        }
        #message { 
            margin-top: 20px; 
            font-size: 20px; 
            color: #333;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的手机网页</h1>
    <button id="myButton">点我一下</button>
    <p id="message"></p>
    <!-- 在这里嵌入 JS 代码 -->
    <script>
        // 1. 获取页面上的元素
        const myButton = document.getElementById('myButton');
        const messageElement = document.getElementById('message');
        // 2. 为按钮添加点击事件监听器
        myButton.addEventListener('click', function() {
            // 3. 当按钮被点击时，执行这里的代码
            messageElement.textContent = '你好！JS 代码成功运行了！';
            // 还可以做一些其他事情，比如改变按钮颜色
            myButton.style.backgroundColor = '#28a745';
        });
    </script>
</body>
</html>

如何使用：

  1. 将上面的代码完整地复制到一个文本文件中。
  2. 将文件另存为 .html 格式，mobile_page.html。
  3. 用手机浏览器打开这个文件（你可以通过数据线将手机连接到电脑，然后将文件复制到手机上，再用浏览器打开；或者将文件上传到网络服务器上，用手机访问网址）。

效果： 在手机上打开后，你会看到一个按钮，点击按钮，下方的文字会发生变化，按钮颜色也会改变，这就证明了 JS 代码成功嵌入并执行了。

手机网页嵌入js代码怎么用
（图片来源网络，侵删）

外部脚本

将 JS 代码写在一个单独的 .js 文件中，然后在 HTML 中通过 <script> 标签的 src 属性来引入它，这是最推荐的方式，因为它能让代码结构更清晰，便于维护。

步骤：

第一步：创建 JS 文件 创建一个名为 script.js 的文件，内容如下：

// script.js
const myButton = document.getElementById('myButton');
const messageElement = document.getElementById('message');
myButton.addEventListener('click', function() {
    messageElement.textContent = '你好！来自外部文件的 JS 代码成功运行了！';
    myButton.style.backgroundColor = '#dc3545';
});

第二步：在 HTML 中引入 修改你的 HTML 文件，将内联的 <script> 代码替换为引入外部文件的代码。

手机网页嵌入js代码怎么用
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">手机网页 JS 示例 (外部文件)</title>
    <!-- CSS 样式可以保持不变 -->
    <style>
        body { font-family: sans-serif; text-align: center; padding-top: 50px; }
        #myButton { 
            padding: 15px 30px; 
            font-size: 18px; 
            background-color: #007bff; 
            color: white; 
            border: none; 
            border-radius: 8px; 
            cursor: pointer;
        }
        #message { 
            margin-top: 20px; 
            font-size: 20px; 
            color: #333;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的手机网页 (外部文件版)</h1>
    <button id="myButton">点我一下</button>
    <p id="message"></p>
    <!-- 引入外部的 JS 文件 -->
    <script src="script.js"></script>
</body>
</html>

如何使用：

  1. 将 HTML 文件和 script.js 文件放在同一个文件夹里。
  2. 用手机浏览器打开 HTML 文件，效果和内联脚本是一样的。

手机网页嵌入 JS 的关键注意事项

在手机上开发网页,除了基本语法，你还需要特别注意以下几点，这直接关系到你的 JS 代码能否正常工作。

视口设置 - 至关重要！

这是移动端网页开发的第一步,也是最重要的一步，如果缺少它，你的网页在手机上会显示为缩放后的电脑版，而不是针对手机屏幕优化的版本。

在 HTML 的 <head> 标签内，必须加入以下 meta 标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width：告诉浏览器，网页的宽度应该等于设备的屏幕宽度。
  • initial-scale=1.0：告诉浏览器，初始的缩放比例是 100%，不要缩放。

没有这个标签，你的 JS 代码获取的窗口尺寸、元素位置等都可能不准确，导致各种布局和交互问题。

等待 DOM 加载完成

在 JS 中，我们经常需要操作页面上的元素（比如按钮、文本框），如果 JS 代码在 HTML 元素还未加载时就执行了，document.getElementById('myButton') 就会找不到这个元素，返回 null，导致后续代码出错。

为了避免这个问题,有两种常用方法：

将 <script> 标签放在 </body> 之前

这是最简单、最推荐的方法，HTML 是从上到下解析的，当解析器执行到 <body> 底部的 <script> 时，页面上所有的 DOM 元素都已经加载完毕。

<body>
    <!-- 你的 HTML 内容 -->
    <button id="myButton">点我</button>
    <!-- 把 script 标签放在这里 -->
    <script>
        // 此时可以安全地操作 DOM
        document.getElementById('myButton').addEventListener('click', ...);
    </script>
</body>

使用 DOMContentLoaded 事件

如果你想把 <script> 放在 <head> 里（比如为了加载第三方库），或者代码量很大，必须放在顶部，那么就应该使用这个事件。

<head>
    ...
    <script>
        // 等待整个 HTML 文档被完全加载和解析完成后再执行代码
        // 不需要等待样式表、图片等资源加载
        document.addEventListener('DOMContentLoaded', function() {
            // 在这里写你的 JS 代码
            const myButton = document.getElementById('myButton');
            myButton.addEventListener('click', ...);
        });
    </script>
</head>

触摸事件 vs. 点击事件

手机主要通过触摸屏交互,所以你需要使用触摸事件，而不是传统的鼠标事件。

  • 推荐使用： click 事件，现代移动浏览器会自动将 touchstart 或 touchend 事件映射为 click 事件，所以直接使用 click 通常是最简单且兼容性最好的方式。
  • 特定场景使用：
    • touchstart：手指触摸屏幕时触发，适合需要立即响应的场景（如滑动开始）。
    • touchend：手指离开屏幕时触发，适合大多数按钮点击。
    • touchmove：手指在屏幕上滑动时触发。

示例：

// 使用 click 事件（推荐）
myButton.addEventListener('click', function() {
    // ...
});
// 使用 touchend 事件
myButton.addEventListener('touchend', function(event) {
    // event.preventDefault(); // 有时可以阻止一些默认的触摸行为，如滚动
    // ...
});

性能优化

手机硬件性能参差不齐,JS 代码的性能问题在手机上会被放大。

  • 事件委托：如果页面上有很多动态生成的、需要绑定事件的元素（如列表项），不要为每个元素都单独绑定事件，而是在它们的共同父元素上绑定一次事件，然后通过判断 event.target 来决定具体执行哪个操作，这样可以大大减少内存占用和提高性能。
  • 避免频繁的 DOM 操作：连续、快速地修改 DOM（例如在一个循环里）会导致页面重排和重绘，非常消耗性能，尽量使用文档片段（DocumentFragment）或一次性更新 DOM。
  • 使用 requestAnimationFrame：对于动画效果，使用 requestAnimationFrame 而不是 setTimeout 或 setInterval，因为它能更好地与屏幕刷新率同步，动画更流畅，也更省电。

总结与最佳实践

  1. 结构清晰：优先使用外部脚本（<script src="...">），将 HTML、CSS、JS 分离。
  2. 移动优先：在 HTML 的 <head> 中必须加入 <meta name="viewport" ...>
  3. 时机正确：将 <script> 标签放在 </body> 之前，或者在 document.addEventListener('DOMContentLoaded', ...) 中编写 JS 代码。
  4. 事件选择：对于按钮等交互，使用 click 事件通常是最佳选择。
  5. 性能考虑：注意事件委托、减少 DOM 操作，使用 requestAnimationFrame 处理动画。

遵循以上步骤和注意事项,你就可以在手机网页中顺利地嵌入和使用 JavaScript 代码了。