JS 文件传参及处理技巧分析(转)

JS 文件传参及处理技巧分析

其实为js文件传参是很久就接触过的一个问题,只是一直没有放在心上,今天在无忧看到又有人问这个问题,今日总结一下。
解决思路: 

1、首先获取到当前JS文件的SRC属性,这里有一个小技巧:我们只需要获取当前页面最后一个script标记内容即可。 
为什么??因为JS是顺序解析的,当前JS脚本解析时后面的js都还没有解析到,当然就认为自己就是最后一个script了。此外,这样获取还有一个好处:我们可以多次引用同一个文件且传入不同的参数,这样可以在js文件中根据参数不同做不同处理,很巧妙把!简直就是动态语言了。 
代码如下: 
复制代码 代码如下:

var scripts=document.getElementsByTagName("script"); 
var curJS=scripts[scripts.length-1]; //curJS就是我们当前的js文件 

得到这个就好办了,通过curJS.src即可获取到完整的路径内容(包括参数)。 

2、下面的就是解析参数内容了,解析的过程相当简单,相信很多人都容易完成这一步。 
但我们要对一个特殊情况进行处理:如果一个参数被传入了多次,则要将该参数值转换为数组存储每一个传入的值。 

完整测试脚本如下: 

复制代码 代码如下:

var getArgs=(function(){ 
var sc=document.getElementsByTagName('script'); 
var paramsArr=sc[sc.length-1].src.split('?')[1].split('&'); 
var args={},argsStr=[],param,t,name,value; 
for(var i=0,len=paramsArr.length;i<len;i++){ 
param=paramsArr[i].split('='); 
name=param[0],value=param[1]; 
if(typeof args[name]=="undefined"){ //参数尚不存在 
args[name]=value; 
}else if(typeof args[name]=="string"){ //参数已经存在则保存为数组 
args[name]=[args[name]] 
args[name].push(value); 
}else{ //已经是数组的 
args[name].push(value); 


/*在实际应用中下面的showArg和args.toString可以删掉,这里只是为了测试函数getArgs返回的内容*/ 
var showArg=function(x){ //转换不同数据的显示方式 
if(typeof(x)=="string"&&!/\d+/.test(x)) return "'"+x+"'"; //字符串 
if(x instanceof Array) return "["+x+"]" //数组 
return x; //数字 

//组装成json格式 
args.toString=function(){ 
for(var i in args) argsStr.push(i+':'+showArg(args[i])); 
return '{'+argsStr.join(',')+'}'; 

return function(){return args;} //以json格式返回获取的所有参数 
})(); 

alert(getArgs()); 
alert("username:"+getArgs()["username"]); 


测试示例的HTML源码: 
复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> new document </title> 
<meta name="generator" content="editplus" /> 
<meta name="author" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<script type="text/javascript" src="test.js?id=4&username=yemoo&id=1&uid=110"></script> 
<script type="text/javascript" src="test.js?id=5&username=ajaxbbs&id=7&uid=253"></script> 
<script type="text/javascript" src="test.js?id=6&username=jack&id=8&uid=258"></script> 
</head> 
<body> 
</body> 
</html> 
<think>好的,用户现在想了解在UniApp中如何使用postMessage向HTML文件传递参数,包括属性的含义和功能。我需要先回顾一下之前关于postMessage的讨论,确保这次回答的一致性和准确性。 首先,用户之前询问过postMessage的使用方法,我详细解释了JavaScript中window.postMessage的用法,包括参数和安全性考虑。现在用户向UniApp环境,这需要结合UniApp的特定结构和API来回答。 UniApp是一个跨平台框架,支持多种小程序和H5。用户提到要传递参数给HTML文件,可能是在Webview或类似场景中使用。需要确认UniApp中处理Webview通信的方式是否和标准web的postMessage有所不同。 查阅提供的引用内容,引用2提到了url拼接参数的方式,引用3是关于UniApp的目录结构。这可能意味着用户在使用UniApp的页面跳或Webview组件时遇到传参问题。需要将postMessage与UniApp的Webview组件结合,因为直接使用window.postMessage可能在跨平台的UniApp中有不同的实现方式。 UniApp中,Webview组件通常通过uni.webview.js库进行通信。可能需要使用uni.postMessage方法,而不是原生的window.postMessage。此外,需要考虑UniApp的生命周期,如onLoad接收参数,但用户可能希望实时通信,而不仅仅是页面加载时传参。 用户需要示例代码和属性解析,所以应该分步骤讲解如何在UniApp页面和HTML文件之间使用postMessage,包括发送和接收消息,并强调安全性验证,比如检查origin。同时,可能需要说明UniApp特有的配置或注意事项,比如manifest.json中的设置或需要引入的库。 还需要注意,用户可能在H5环境下使用,或者嵌入Webview到原生应用中,不同环境下实现方式可能不同。需要明确说明这些差异,并提供通用的解决方案,确保示例代码在UniApp中有效。 最后,确保回答结构清晰,分点说明属性功能,并提供完整的代码示例,帮助用户理解整个流程。同时,生成相关问题,引导用户深入了解更多相关内容,如安全性优化或跨平台兼容性问题。</think>### UniApp 中 `postMessage` 向 HTML 传参详解 在 UniApp 中,若需与内嵌的 HTML 页面(如通过 `<web-view>` 组件加载的页面)进行通信,需结合 WebView 组件的 **双向通信机制** 和浏览器原生的 `postMessage` 方法。以下是具体实现步骤及属性解析: --- #### **一、核心流程与属性功能** | 步骤 | 功能说明 | 关键属性/方法 | |---------------|--------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------| | **1. UniApp 发送消息** | 通过 `uni.postMessage` 向 WebView 内嵌的 HTML 页面发送数据 | - `data`: 发送的数据(字符串/JSON)<br>- `success`: 发送成功的回调 | | **2. HTML 接收消息** | HTML 页面通过 `window.addEventListener('message')` 监听消息 | - `event.data`: 接收的数据<br>- `event.origin`: 验证消息来源(UniApp 页面地址) | | **3. HTML 发送回复** | HTML 通过 `window.parent.postMessage` 向 UniApp 页面返回数据 | - `window.parent`: 指向父窗口(UniApp WebView)<br>- `postMessage` 参数结构与发送方一致 | | **4. UniApp 接收回复** | UniApp 页面通过 `@message` 事件监听 HTML 的回复 | - `e.detail.data`: 接收的回复数据<br>- `e.detail.origin`: 消息来源(HTML 页面地址) | --- #### **二、具体实现示例** ##### **场景:UniApp 向 WebView 内嵌的 HTML 传递用户信息** ###### **1. UniApp 页面代码(`.vue` 文件)** ```html <template> <web-view :src="htmlUrl" @message="handleHtmlMessage" ></web-view> </template> <script> export default { data() { return { htmlUrl: '/static/my-page.html?defaultParam=123' // 静态HTML路径(支持初始参数拼接)[^2] }; }, mounted() { // 向HTML发送消息(需等待WebView加载完成) setTimeout(() => { uni.postMessage({ data: { type: 'userInfo', user: { id: 1001, name: '张三' } }, success: () => console.log('消息发送成功') }); }, 2000); }, methods: { handleHtmlMessage(e) { // 接收HTML回复并验证来源 if (e.detail.origin !== 'https://your-html-domain.com') return; console.log('收到HTML回复:', e.detail.data); } } }; </script> ``` ###### **2. HTML 页面代码(`my-page.html`)** ```html <!DOCTYPE html> <html> <body> <script> // 监听UniApp发送的消息 window.addEventListener('message', (event) => { // 安全验证:确保消息来自可信源 if (event.origin !== 'http://localhost:8080') return; // 替换为UniApp运行的实际域名 // 处理消息 if (event.data.type === 'userInfo') { console.log('收到用户信息:', event.data.user); // 向UniApp发送回复 window.parent.postMessage({ type: 'ack', status: 'success' }, event.origin); // 必须指定origin,避免跨域问题 } }); // 获取UniApp通过URL拼接的初始参数(如?defaultParam=123)[^2] const urlParams = new URLSearchParams(window.location.search); console.log('初始参数:', urlParams.get('defaultParam')); </script> </body> </html> ``` --- #### **三、关键属性解析** 1. **`uni.postMessage` 参数** - `data`: 支持字符串或可序列化对象(如 JSON),**不可传递函数或 DOM 元素** - `success`: 消息成功发送到 WebView 容器的回调(不保证 HTML 已接收) 2. **`@message` 事件对象** - `e.detail.data`: HTML 页面返回的数据 - `e.detail.origin`: HTML 页面的源地址,用于防止恶意攻击(如 `https://external-site.com`) 3. **WebView 的 `src` 属性** - 支持通过 URL 拼接初始参数(如 `my-page.html?taskId=100`),HTML 页面可通过 `URLSearchParams` 解析[^2] - 本地静态 HTML 需存放在 `static` 目录(UniApp 强制规范)[^3] --- #### **四、安全与调试建议** 1. **强制校验消息来源** ```javascript // UniApp 端校验 if (e.detail.origin !== 'https://your-html-domain.com') return; // HTML 端校验 if (event.origin !== 'http://localhost:8080') return; // H5运行时本地地址 ``` 2. **调试技巧** - H5 平台:使用 Chrome 开发者工具直接调试 WebView 内容 - 小程序平台:需开启调试模式并通过 `uni.setEnableDebug` 输出日志 --- #### **五、跨平台兼容性** | 平台 | 支持情况 | 注意事项 | |-----------|-----------------------------------|-------------------------------------------------------------------------| | **H5** | 完全支持 | 需处理域名白名单和 HTTPS 限制 | | **微信小程序** | 需配置业务域名 | 在 `manifest.json` 的 `mp-weixin` 段添加 `web-view` 域名白名单 | | **App** | 安卓/iOS 均支持 | 若 HTML 使用敏感 API(如摄像头),需在原生配置中声明权限 | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值