当前位置: 首页 > news >正文

h5|web页面嵌套iframe传参给cocosCreator

h5|web页面嵌套iframe传参给cocosCreator

目录
一、快速浏览
二、详细实现与项目代码
三、安全性评估——iframe

实现效果:
在这里插入图片描述

一、快速浏览

  1. 在h5页面中,使用JavaScript获取需要传递的参数,如下:
var token = 'ZHESHINIDETOKEN';
var phone = '110120119';
  1. 使用iframe嵌入cocosCreator游戏页面,同时将参数作为url的query string传递,如下:
<iframe src="http://192.168.66.1:9800/?token=ZHESHINIDETOKEN&phone=110120119"></iframe>
  1. 在cocosCreator游戏页面中,使用JavaScript获取url中的参数,如下:
var url = window.location.href;   //http://192.168.66.1:9800/?token=ZHESHINIDETOKEN&phone=110120119
var params = url.split('?')[1].split('&');  //["token=ZHESHINIDETOKEN","phone=110120119"]
var token = params[0].split('=')[1];   //ZHESHINIDETOKEN
var phone = params[1].split('=')[1];   //110120119
  1. 在cocosCreator游戏中使用获取到的参数进行相关操作。

二、详细实现与项目代码

  1. web|h5 代码 (页面中嵌套iframe显示cocos)
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>web|h5传递参数给iframe到cocos</title> 
</head>
<script>
</script>
<body><h1>web|h5传递参数给iframe到cocos</h1><iframe height="60%" width= "80%" src="http://192.168.66.1:9800/?token=ZHESHINIDETOKEN&phone=110120119"></iframe>
</body>
</html>
  1. cocos creator 代码实现
    2.1场景节点设置
    在这里插入图片描述
    2.2在Canvas下添加脚本 (parameControll.ts) 代码如下:
import { _decorator, Component, Node, Label } from 'cc';    //cocos creator v3.6.1
const { ccclass, property } = _decorator;@ccclass('parameControll')
export class parameControll extends Component {start() {var url = window.location.href;  //http://192.168.66.1:9800/?token=ZHESHINIDETOKEN&phone=110120119var params = url.split('?')[1].split('&'); //["token=ZHESHINIDETOKEN","phone=110120119"]var param1 = params[0].split('=')[1];  //ZHESHINIDETOKENvar param2 = params[1].split('=')[1];   //110120119this.node.getChildByName("token-001").getComponent(Label).string  = param1;  //token-001节点赋值this.node.getChildByName("phone-001").getComponent(Label).string  = param2;  //phone-001节点赋值}update(deltaTime: number) {}
}

      2.3实现效果
在这里插入图片描述

三、安全性评估——iframe

在使用h5嵌套iframe传参给cocosCreator时,需要进行安全性评估,以确保传递的参数不会被恶意利用或篡改。

以下是一些安全性评估建议:

  • 验证参数:在接收到参数之后,需要对其进行验证,确保参数的格式和内容符合预期。例如,可以检查参数是否为数字、字符串或布尔值,并且是否符合特定的格式要求。

  • 防止跨站脚本攻击(XSS):在传递参数时,需要对参数进行转义或过滤,以防止恶意脚本注入。例如,可以使用HTML实体编码或JavaScript的encodeURIComponent()函数来转义特殊字符。

  • 防止跨站请求伪造(CSRF)攻击:在接收到请求时,需要验证请求来源是否合法。例如,可以使用CSRF令牌来验证请求是否来自合法的来源。

  • 加密传输:为了保护传输过程中的数据安全,可以使用SSL/TLS加密协议来加密传输的数据。

  • 限制访问权限:为了防止未授权的访问,可以限制访问接口的权限,并使用身份验证和授权机制来验证访问者的身份和权限。

总之,h5嵌套iframe传参给cocosCreator时,需要注意安全性问题,采取相应的措施来保护数据安全和防止恶意攻击。


关键词:

将token或者其他参数传递给cocoscreator

用iframe的src携带参数传递

h5嵌套iframe传参给cocosCreator

相关文章:

h5|web页面嵌套iframe传参给cocosCreator

h5|web页面嵌套iframe传参给cocosCreator 目录 一、快速浏览 二、详细实现与项目代码 三、安全性评估——iframe 实现效果: 一、快速浏览 在h5页面中&#xff0c;使用JavaScript获取需要传递的参数&#xff0c;如下&#xff1a; var token ZHESHINIDETOKEN; var phone 11…...

阿里云安全产品Web应用防火墙是什么?有什么作用?

Web应用防火墙是一款网站Web应用安全的防护产品&#xff0c;拦截针对您网站发起的Web通用攻击&#xff08;如SQL注入、XSS跨站等&#xff09;或是应用资源消耗型攻击&#xff08;CC&#xff09;&#xff0c;同时也可以满足您网站从流量管理角度来防御业务风险&#xff0c;例如B…...

【SSM】Spring6(九.代理模式)

文章目录1.代理模式2. 静态代理3. 动态代理3.1 JDK动态代理3.2 CGLIB动态代理1.代理模式 代理模式主要有两种&#xff1a; 静态代理模式 动态代理模式 2. 静态代理 有这样一个业务&#xff1a;订单的生成&#xff0c;修改&#xff0c;查看详情。实现如下 package com.sdnu.…...

【1017. 负二进制转换】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你一个整数 n &#xff0c;以二进制字符串的形式返回该整数的 负二进制&#xff08;base -2&#xff09;表示。 注意&#xff0c; 除非字符串就是 "0"&#xff0c;否则返回的字符串中不…...

C语言实现插入排序与希尔排序

目录 一&#xff0c;插入排序 插入排序C语言实现&#xff08;升序&#xff09; 1&#xff0c;将新元素插入到有序序列 2&#xff0c;循环的开始与终止 二&#xff0c;希尔排序 希尔排序C语言实现&#xff08;升序&#xff09; 1&#xff0c;单趟&#xff1a; 2&#x…...

第九章-DOM与CSS

style属性 文档中每个元素节点都有一个属性style。style属性包含着元素样式&#xff0c;查询这个属性将返回一个对象而不是一个简单的字符串。样式都存放在这个style对象的属性里。 var element getElementById("example") //查看颜色属性 element.style.color //…...

蓝桥杯真题练习

小蓝在玩一个寻宝游戏, 游戏在一条笔直的道路上进行, 道路被分成了 nn 个方格, 依次编号 1 至 nn, 每个方格上都有一个宝物, 宝物的分值是一个整数 (包括正数、负数和零), 当进入一个方格时即获得方格中宝物的分值。小蓝可 以获得的总分值是他从方格中获得的分值之和。 小蓝开始…...

插入排序的简单理解

详细描述 插入排序的基本思想是&#xff1a;将一个记录插入到已经排好序的有序表中&#xff0c;从而得到一个新的、记录数增 1 的有序表。 在其实现过程中使用双层循环&#xff0c;外层循环针对除了第一个元素之外的所有元素&#xff0c;内层循环针对当前元素前面的有序表进行…...

Springboot框架集成Websocket通信方式

Websocket实现了“服务器”主动向“客户端”发送数据,改变了以往通过轮询、长轮训、长连接等方式获取服务器端数据的方式。 一、Websocket有三种不同的用场景,单播、广播和组播; (一)、单播(Unicast) 单播是客户端与服务器之间的“一对一”的连接。是在一个单个的发送…...

将json数据分组

在工作中有时需要根据业务需要&#xff0c;将大量数据进行处理分成几个一组 // 例如要将下方数据进行处理 var stuCount [{"id": "1612321835288","libraryCode": "D","regionCode": "A","positionCode&qu…...

从零开始实现一个C++高性能服务器框架----Socket模块

此项目是根据sylar框架实现&#xff0c;是从零开始重写sylar&#xff0c;也是对sylar丰富与完善 项目地址&#xff1a;https://gitee.com/lzhiqiang1999/server-framework 简介 项目介绍&#xff1a;实现了一个基于协程的服务器框架&#xff0c;支持多线程、多协程协同调度&am…...

ld: library not found for -lcrt0.o

ld: library not found for -lcrt0.o 背景&#xff1a; Mac 系统编译的时候报错 语言&#xff1a;golang 原因&#xff1a; 代码使用了静态编译&#xff0c;-static。stack overflow 上说 This option will not work on Mac OS X unless all libraries (including libgcc.a…...

接口测试和功能测试的区别有哪些?说一些你不知道的知识

目录 接口测试和功能测试的区别 目的 测试范围 测试方法 重要性 ​编辑 举个例子 对于接口测试 对于功能测试 ​编辑 总结 接口测试和功能测试是软件测试中的两种常见测试类型&#xff0c;主要用于评估软件系统的质量。尽管这两种测试都是为了评估软件系统的性…...

深度学习实战——不同方式的模型部署(CNN、Yolo)

忆如完整项目/代码详见github&#xff1a;https://github.com/yiru1225&#xff08;转载标明出处 勿白嫖 star for projects thanks&#xff09; 目录 系列文章目录 一、实验综述 1.实验工具及及内容 2.实验数据 3.实验目标 4.实验步骤 二、ML/DL任务综述与模型部署知识…...

【论文阅读】GNN阅读笔记

A gentle introduction on gnn 前言 发表在distill的文章 图神经网络在应用上才刚刚开始 搭建了一个GNN playground 什么是图 图是表示实体之间的关系 可以分别表示成点向量、边向量、图向量 图可以分为有向图和无向图 数据是怎么表示成图 图片表示成图&#xff1a; …...

QT常用控件——QTreeWidget(树控件),QTableWidget控件

目录 ★先开个小灶,在此插句话:【有关Halcon与Qt联编变量转换】 QTreeWidget树控件 QTableWidget控件...

为什么学校购买小型数控机床而不是大型工业数控机床?

CNC 机器是计算机控制的设备&#xff0c;可以高精度和准确度地切割、雕刻、钻孔或雕刻各种材料。 它们广泛应用于制造、工程、设计和艺术行业。 CNC 机器具有不同的尺寸和功能&#xff0c;从小型台式机到大型工业机型。 人们可能想知道为什么学校会选择购买小型 CNC 机器而不是…...

【Go自学】一文搞懂Go append方法

我们先看一下append的源码 // The append built-in function appends elements to the end of a slice. If // it has sufficient capacity, the destination is resliced to accommodate the // new elements. If it does not, a new underlying array will be allocated. //…...

【压测】通过Jemeter进行压力测试(超详细)

文章目录背景一、前言二、关于JMeter三、准备工作四、创建测试4.1、创建线程组4.2、配置元件4.3、构造HTTP请求4.4、添加HTTP请求头4.5、添加断言4.6、添加察看结果树4.7、添加Summary Report4.8、测试计划创建完成五、执行测试计划总结背景 通过SpringCloudGateway整合Nacos进…...

C# | 上位机开发新手指南(七)加密算法

上位机开发新手指南&#xff08;七&#xff09;加密算法 文章目录上位机开发新手指南&#xff08;七&#xff09;加密算法前言加密算法的分类对称加密算法和非对称加密算法流加密算法和块加密算法分组密码和序列密码哈希函数和消息认证码对称加密与非对称对称加密优点缺点对称加…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...