当前位置：首页 > 前端开发 > 正文

如何在URL中执行JavaScript？

在HTML中，可通过URL的 javascript:协议直接执行JS代码（如“），或通过URL参数传递数据，在页面JS中解析参数后触发对应函数，需注意安全风险和浏览器兼容性。

在网页开发中,通过URL调用JavaScript是一种常见需求，常用于传递参数、触发特定功能或实现页面跳转后的动态操作，以下是两种安全可靠的方法及详细实现步骤：

通过URL参数（Query String）传递并执行JS

原理：在URL问号（）后添加参数，JavaScript解析参数后执行对应操作。

示例URL：https://example.com/page?action=showMessage&text=Hello

实现步骤：

如何在URL中执行JavaScript？第1张

解析URL参数：
使用URLSearchParams解析当前URL中的参数：
// 获取当前URL参数 const urlParams = new URLSearchParams(window.location.search); const action = urlParams.get('action'); // 参数名需小写 const text = urlParams.get('text');
根据参数执行JS：
通过条件判断执行对应函数，禁止直接执行参数中的代码（防XSS攻破）：

// 安全示例：预定义函数白名单 function showMessage(msg) { alert(decodeURIComponent(msg)); // 解码URL编码内容 } // 检查参数并执行 if (action === 'showMessage' && text) { showMessage(text); // 仅执行预定义的安全函数 }

原理：利用后的哈希值变化，通过hashchange事件监听并响应。

示例URL：https://example.com/page#showModal=true

实现步骤：

监听哈希变化：
解析哈希并执行操作：

function handleHashChange() { const hash = window.location.hash.substring(1); // 去掉#号 const params = new URLSearchParams(hash); if (params.get('showModal') === 'true') { openModal(); // 调用预定义函数 } }

绝不直接执行URL中的代码：
禁止使用eval()或new Function()执行URL中的字符串（如?code=alert(1)）。
严格校验参数值：
- 使用正则表达式验证格式（如只允许字母数字）：if (/^[a-z0-9]+$/.test(param)) { ... }
- 限制参数范围（如action只允许['showMessage', 'closeModal']）。
转义输出内容：
若将参数插入DOM，使用textContent而非innerHTML： document.getElementById('output').textContent = textParam; // 安全