Vue2或者uniapp 中 使用 iframe 嵌入本地 HTML 页面 并 相互通信。

1.使用 iframe 嵌入本地 HTML 页面(以pdfjs为例)

在 public 文件夹下新建 static 文件夹,然后将 html 文件及相关引用拷贝到 static 文件夹下
在这里插入图片描述

uniapp在src下新建hybrid文件
在这里插入图片描述
vue 文件完整代码

<template><div class="wrap"><iframeref="iframe":src="`${viewerUrl}?file=${encodeURIComponent(pdfUrl)}&page=12`"width="100%"height="50%"frameborder="0"></iframe><button @click="vueSendMsg">vue向iframe传递信息</button><button @click="iframeMethods">触发iframe中的方法</button></div>
</template><script>export default {data() {return {viewerUrl:'/hybrid/html/web/viewer.html',  // vue2 这里 直接写 static ,static/web/viewer.html};},methods: {// vue获取iframe传递过来的信息getiframeMsg(event){const res = event.data;console.log(event)if(res.cmd == 'myIframe'){console.log(res)}},// vue向iframe传递信息vueSendMsg(){const iframeWindow = this.$refs.iframe.contentWindow;iframeWindow.postMessage({cmd:'myVue',params : {info: 'Vue向iframe传递的消息',}},'*')},// 触发iframe中的方法iframeMethods(){this.$refs.iframe.contentWindow.triggerByVue('通过Vue触发iframe中的方法');},},mounted() {window.addEventListener('message',this.getiframeMsg)},
};
</script><style lang="scss" scoped>.wrap{width: 100%;height: 500px;
}
</style>

html 文件完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h3>iframe嵌入的页面</h3><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="google" content="notranslate"><title>PDF.js viewer</title><!-- This snippet is used in production (included from viewer.html) --><link rel="resource" type="application/l10n" href="locale/locale.json"><script src="../build/pdf.mjs" type="module"></script><link rel="stylesheet" href="viewer.css"><!-- <script src="viewer.js" type="module"></script> --><script type="module">const queryString = document.location.search.substring(1);function parseQueryString(query) {const params = new Map();for (const [key, value] of new URLSearchParams(query)) {params.set(key.toLowerCase(), value);}return params;}// 当前页码和pdf地址通过链接传进来const curParams = parseQueryString(queryString);var url = curParams.get("file"); // pdf 地址var {pdfjsLib} = globalThis;pdfjsLib.GlobalWorkerOptions.workerSrc = '../build/pdf.worker.mjs';var pdfDoc = null,pageNum =Number(curParams.get("curpage"))|| 1,  // 当前页码pageTotal=null, // 总页码pageRendering = false,pageNumPending = null,scale = 0.8,canvas = document.getElementById('the-canvas'),ctx = canvas.getContext('2d');// iframe获取Vue传递过来的信息 拿到进度存储的页码window.addEventListener("message", getVueMsg);function getVueMsg(event){const res = event.data;if(res.cmd == 'myVue'){pageNum=res.curPage;console.log('iframe获取Vue传递过来的信息',res,res.curPage)}};/*** Get page info from document, resize canvas accordingly, and render page.* @param num Page number.*/function renderPage(num) {pageRendering = true;// Using promise to fetch the pagepdfDoc.getPage(num).then(function(page) {var viewport = page.getViewport({scale: scale});canvas.height = viewport.height;canvas.width = viewport.width;// Render PDF page into canvas contextvar renderContext = {canvasContext: ctx,viewport: viewport};var renderTask = page.render(renderContext);// Wait for rendering to finishrenderTask.promise.then(function() {pageRendering = false;if (pageNumPending !== null) {// New page rendering is pendingrenderPage(pageNumPending);pageNumPending = null;}});});// Update page countersdocument.getElementById('page_num').textContent = num;}/*** If another page rendering in progress, waits until the rendering is* finised. Otherwise, executes rendering immediately.*/function queueRenderPage(num) {if (pageRendering) {pageNumPending = num;} else {renderPage(num);}iframeSendMsg(num,pageTotal); // 实时触发页码变化给 vue页面 }/*** Displays previous page. 上一页*/function onPrevPage() {if (pageNum <= 1) {return;}pageNum--;queueRenderPage(pageNum);}document.getElementById('prev').addEventListener('click', onPrevPage);/*** Displays next page. 下一页*/function onNextPage() {if (pageNum >= pdfDoc.numPages) {return;}pageNum++;queueRenderPage(pageNum);}document.getElementById('next').addEventListener('click', onNextPage);/*** Asynchronously downloads PDF. 初次加载*/pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {pdfDoc = pdfDoc_;document.getElementById('page_count').textContent = pdfDoc.numPages;pageTotal=pdfDoc.numPages;// console.log('总页码',pageTotal)iframeSendMsg(pageNum,pageTotal) // 初次加载后向cue页面传递 页码// Initial/first page renderingrenderPage(pageNum);});// iframe向vue传递信息window.iframeSendMsg = 	function iframeSendMsg(num,total){window.parent.postMessage({cmd:'myIframe',pdfTotal:pageTotal,readPage:num,params : {info: 'iframe向Vue传递的消息',}},'*');};</script><script type="text/javascript">function triggerByVue(msg){console.log(msg)}</script></head><body tabindex="1"><canvas id="the-canvas" style="width: 100%; height: 205;"></canvas><div><button id="prev">上一页并传给vue</button><button id="next">下一页传给vue</button>&nbsp; &nbsp;<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span></div><!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> --></body></body><script type="text/javascript">// iframe向vue传递信息function iframeSendMsg(){window.parent.postMessage({cmd:'myIframe',params : {info: 'iframe向Vue传递的消息',}},'*');};// iframe获取Vue传递过来的信息window.addEventListener("message", getVueMsg);function getVueMsg(event){const res = event.data;if(res.cmd == 'myVue'){console.log(res)}};function triggerByVue(msg){console.log(msg)}
</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/178683.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java实现简单连点器1

这段代码是使用Java的AWT库来实现模拟鼠标点击的操作。它创建了一个Robot对象&#xff0c;通过该对象可以模拟鼠标和键盘操作。在这段代码中&#xff0c;首先设置了点击位置的坐标&#xff08;x和y&#xff09;&#xff0c;点击间隔时间&#xff08;interval&#xff09;以及点…

顶级数据恢复工具—— 最全的15个数据恢复软件榜单

在这个信息为王的数字时代&#xff0c;关键数据的丢失对个人和企业来说都可能是灾难性的。无论是由于意外删除、硬件故障还是恶意攻击&#xff0c;拥有强大的数据恢复解决方案都是至关重要的。在本综合指南中&#xff0c;我们将探索市场上最好的数据恢复软件&#xff0c;包括顶…

java+python农村集体产权管理系统php+vue

注册、登陆该系统根据操作权限的不同分为管理员和用户两种&#xff0c;新用户在登陆前要进行用户注册&#xff0c;注册完成后方可进行登陆。 本次设计的关键问题处理&#xff0c;主要有如下几点&#xff1a; (1&#xff09;本次开发&#xff0c;采用主流Thinkphp框架进行开发&a…

KernelSHAP vs TreeSHAP

Kernel SHAP和Tree SHAP都用于近似Shapley值。Tree SHAP要快得多。缺点是它只能用于基于树的算法&#xff0c;如随机森林和xgboost。另一方面&#xff0c;Kernel SHAP是模型不可知的(model agnostic)&#xff0c;这意味着它可以与任何机器学习算法一起使用。我们将比较这两种近…

如何把 Oracle 19C RAC+DG加入到ORACLE EM 13C监控

平时见ORACLE 19c rac single dg的部署很多了&#xff0c;ORACLE em 13c 的安装也很多了,但如何把手工部署的oracle 19c rac dg 添加到em 13c 中去&#xff0c;让EM13C 来实现对RACDG的监控&#xff0c;主要是DG的EM13C的监控&#xff0c;还没有看到&#xff0c;大部分都是直接…

AI编译优化技术“loop tiling“、“ordering“、“caching“和“unrolling“

文章目录 概念例子 概念 在计算机科学和编程中&#xff0c;特别是在高性能计算和优化编译器设计领域&#xff0c;“loop tiling”、“ordering”、"caching"和"unrolling"是一些常见的术语&#xff0c;它们涉及到改进程序性能的不同策略。下面分别解释这些…

2023极客大挑战-AGRT战队wp

目录 RE Shiftjmp 点击就送的逆向题 幸运数字 ​编辑 砍树 小黄鸭 flower-or-tea mySelf 是男人就来扎针 听说cpp很难&#xff1f; Easymath 寻找初音未来 Rainbow 浪漫至死不渝 ezandroid Pwn nc_pwntools password ret2text write1 ret2libc ezpwn wr…

力扣23. 合并 K 个升序链表(java,最小堆解法)

Problem: 23. 合并 K 个升序链表 文章目录 题目描述思路解题方法复杂度Code 题目描述 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 思路 1.对于合并k个有序链表&#xff0c;我们较为容易想…

高翔:《自动驾驶与机器人中的SLAM技术 》-Slam_in_autonomous_driving 编译过程中遇到的问题

使用的环境是ubuntu20.04 问题1.安装g2o没有问题&#xff0c;不过在编译整个项目工程时候报错&#xff1a; ”openmp_mutex.h: 30:10: fatal error: g2o/config.h: No such file or directory“: 解决办法&#xff1a; 只需要将/thirdparty/g2o/build/g2o下的config.h放到/…

shiro整合redis

shiro整合redis 前言&#xff1a;shiro默认的session是存储在jvm内存中的&#xff0c;这样会导致java服务内存占用更大以及一旦服务器宕机或者版本迭代需要重启服务时&#xff0c;缓存中的数据不能恢复&#xff0c;导致用户需要重新登录认证&#xff0c;体验很差。因此利用第三…

C++ STL : std::list,源码面前,了无秘密,大裤衩啥颜色材质给你写的明明白白,哈哈

eat std::list source code list的好处是每次插入或删除一个元素&#xff0c;就配置或释放一个元素空间。因此&#xff0c;list对于空间的运用有绝对的精准&#xff0c;一点也不浪费。而且&#xff0c;对于任何位置的插入和元素移除都永远是常数时间。 可惜了当下有点忙能力欠…

c语言练习12周(15~16)

编写int fun(char s[])函数&#xff0c;返回字串中所有数字累加和 题干编写int fun(char s[])函数&#xff0c;返回字串中所有数字累加和。 若传入串"k2h3yy4x"返回整数9&#xff1b;若传入串"uud9a6f7*"返回整数22 //只填写要求的函数 int fun(cha…

JSON详细教程

&#x1f60a;JSON详细教程 &#x1f6a9;JSON简介☃️JSON语法规则&#x1f50a;JSON和JavaScript对象的区别 ☃️JSON数据类型字符串&#x1f50a;数字&#x1f50a;布尔值&#x1f50a;数组&#x1f50a;对象&#x1f50a;Null ☃️JSON对象&#x1f50a;访问JSON对象的值&a…

堆的应用(堆排序、Top-K问题)

文章目录 1 堆排序2 Top-K问题 1 堆排序 堆排序是一种基于二叉堆&#xff08;通常使用数组实现&#xff09;的排序算法。 它的基本思想是利用堆这种数据结构的性质&#xff0c;通过建立一个堆&#xff08;大堆或小堆&#xff09;&#xff0c;使得堆的根节点是所有节点中的最大值…

在线 SQL 模拟器SQL Fiddle使用简介

在线 SQL 模拟器SQL Fiddle使用简介 有时候&#xff0c;我们想去验证 SQL语句&#xff0c;却缺少数据库环境&#xff0c;那该怎么办呢&#xff1f; 这时候在线 SQL 模拟器就有了用武之地。SQL 模拟器免安装&#xff0c;可以在网页直接运行 SQL 。 SQL Fiddle 支持 MySQL、Orac…

C++ Qt QString用法详解与代码演示

作者:令狐掌门 技术交流QQ群:675120140 csdn博客:https://mingshiqiang.blog.csdn.net/ 文章目录 创建和初始化长度和容量修改字符串字符串比较查找和提取数值转换arg格式化`arg` 的基本用法精确控制占位符多占位符的复杂替换使用大括号占位符注意事项迭代Unicode 和编码QSt…

SystemVerilog 入门

文章目录 包定义SystemVerilog 数据类型结构体 SystemVerilog 过程块可嵌套模块接口 System Verilog 的优点 提高了硬件建模能力、编码效率和抽象能力&#xff1b;RTL 级、系统级行为描述&#xff1b; 增强了验证能力和为大规模复杂设计编写有效、无竞争测试程序的断言功能&am…

spring-framework-5.2.25.RELEASE源码环境搭建

环境准备 spring-framework-5.2.25.RELEASEIntelliJ IDEA 2022.3.1java version “11.0.20” 2023-07-18 LTSGradle 5.6.4java version “1.8.0_301” 下载spring-framework-5.2.25.RELEASE源码 git clone https://gitee.com/QQ952051088/spring.git cd spring gradlew buil…

[学习记录]Node event loop 总结流程图

文章目录 文章来源根据内容输出的流程图待处理遗留的问题参考 文章来源 详解JavaScript中的Event Loop&#xff08;事件循环&#xff09;机制 根据内容输出的流程图 待处理 这里从polling阶段开始 好像有些问题 遗留的问题 为什么“在I/O事件的回调中&#xff0c;setImmediate…

mysql 存储过程do while

关于mysql 存储过程内实现循环&#xff0c;在用repeat 时发现&#xff0c; 很容易因为done的值循环终止。为此研究了下 do while来实现 循环。 过程和repeat 大差不差&#xff0c;值得注意的是 多了一个循环次数&#xff0c;通过该变量去定义我们要循环的次数。 做了一个简易…