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

这篇具有很好参考价值的文章主要介绍了h5|web页面嵌套iframe传参给cocosCreator。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

实现效果:
h5 web 嵌套页面,cocos-creator,Vue,个人日志,前端,javascript,游戏引擎

一、快速浏览
  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场景节点设置
    h5 web 嵌套页面,cocos-creator,Vue,个人日志,前端,javascript,游戏引擎
    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=110120119
        
        var params = url.split('?')[1].split('&'); //["token=ZHESHINIDETOKEN","phone=110120119"]
        var param1 = params[0].split('=')[1];  //ZHESHINIDETOKEN
        var param2 = params[1].split('=')[1];   //110120119

        this.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实现效果
h5 web 嵌套页面,cocos-creator,Vue,个人日志,前端,javascript,游戏引擎

三、安全性评估——iframe

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

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

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

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

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

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

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

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


关键词:文章来源地址https://www.toymoban.com/news/detail-782724.html

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

用iframe的src携带参数传递

h5嵌套iframe传参给cocosCreator

到了这里,关于h5|web页面嵌套iframe传参给cocosCreator的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序使用webview嵌套H5中使用iframe真机无法跳转 wx.miniProgram.navigateTo等失效问题

    小程序使用webview嵌套H5真机无法跳转 wx.miniProgram.getEnv、wx.miniProgram.navigateTo等失效无响应问题分享 原因分析:由于页面使用了iframe导致在子页面中真机无法准确获取页面运行环境(开发者工具中无影响); 解决方案:在调用方法前加一个 parent. 在父页面中调用方法即可正常运

    2024年02月03日
    浏览(58)
  • 小程序通过webView打开H5页面并传参(包含webView业务域名配置)、H5页面实现返回小程序并实现传参

    小程序内嵌webview实现跳转、传参 1、小程序通过webView打开H5页面并传参 2、H5接收小程序传参,H5返回小程序并实现传参,小程序接收H5传参 一、小程序通过webView打开H5页面并传参 在小程序中一般通过webview打开H5页面 常见问题: 1、小程序通过webview打开H5页面,需要配置业务域

    2024年02月12日
    浏览(47)
  • vue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案

    这两天工作中遇到一个这样的需求,切换tab标签时,要求对应的tab页面不刷新,但是项目中加入了一部分含有iframe的页面,在切换路由的过程中,如果使用keep-alive是达不到缓存ifram嵌套的页面效果的。 vue中的keep-alive 1.原理:vue 的缓存机制并 不是直接存储 DOM 结构 ,而是将

    2024年02月04日
    浏览(80)
  • 微信小程序嵌套H5页面,调用微信小程序扫码功能,并将结果传回H5页面

    实现方式: 小程序嵌套h5页面,点击h5页面的扫码按钮跳转到小程序的扫码页面,进入之后会立即扫码,拿到扫码结果后,跳转到小程序定义好的webview页面,再由webview页面进入h5页面。 缺点:为了唤起扫码,会进入一个空白的扫码页面 1、小程序嵌套h5页面方法 在小程序中,创

    2024年02月12日
    浏览(53)
  • web-view往h5传参及传参乱码问题

    1、微信端的操作 往wxml中配置web-view 并在对应js中动态设置路径的参数 在需要的地方修改其路径参数 2、h5端(接受上面传进来的参数) 注:这里建议如果h5是vue项目的话,可以本地映射一个地址出去。在vue.config.js下配置devServer--host设置为本机ip地址,接着小程序接入该地址用

    2024年02月09日
    浏览(38)
  • 小程序嵌套h5页面,使用navigator.mediaDevices.getUserMedia的坑点

    基本上在使用这个方法的时候,网上都是全部做好兼容性考虑的,直接复制即可,但是如果微信小程序嵌套了页面就会出现问题; 当苹果手机用户使用时,如果ios版本低于14.3的时候就会提示报错:undefned is not an object (evaluating navigator.mediaDevices.getUserMedia\\\') 这个时由于iOS webk

    2024年02月03日
    浏览(34)
  • 小程序嵌套H5跳转(web-view)问题解决

    项目场景:小程序内嵌h5页面时,点击某处需要跳转进去对应的页面,进行之后的业务逻辑。贴图两张:第一张为pc端小程序模拟器点击跳转时的截图,第二张为手机端测试接收的入参截图(第二张我是拿alert断点去查入参的) 但是目前你会发现,拿微信开发者工具测的时候就会

    2024年02月11日
    浏览(47)
  • 小程序web-view中嵌套H5如何跳转其他小程序

    首先web-view中H5是无法跳转到其他小程序的 只能通过H5跳转回小程序,再让小程序跳转到其他小程序 H5跳转回小程序使用wx.miniProgram.navigateTo() 小程序跳转小程序使用wx.navigateToMiniProgram(),官方文档有示例,用法很简单,只需要传入appid,还有path(可选参数,不是必须的,不传则默认

    2024年02月08日
    浏览(42)
  • 踩坑vue中嵌套iframe项目,嵌套在iframe中的项目无法登录!

    解决方案原文 这个我试了下是谷歌浏览器做了限制,在edge上可以正常登录 我遇到这种情况主要是我的项目用的是cookie存储的登录状态。需要设置cookie的域名,使其在嵌入的网站和网站域名下都能访问cookie,但是我设置了还是没用。 我最终的 解决方式 是将cookie存储状态改成

    2023年04月26日
    浏览(64)
  • uni-app和web-view页面相互传参

    首先:这里说的是uni-app开发的APP项目,嵌入web-view页面,并进行相互传参,如果和您想了解的内容相符,请继续阅读。 一、说到web-view嵌入uni-app开发的APP,传参方面很多人首先会想到url传参。 这种方法是app向webview传参最简单的方式,但也存在许多弊端: 1.参数会被抓取,如

    2024年02月08日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包