在vue中使用iframe 引用HTML页面

最新推荐文章于 2024-06-24 16:15:07 发布
最新推荐文章于 2024-06-24 16:15:07 发布
阅读量2.4k 收藏 1
点赞数
文章标签： vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38420994/article/details/114255583
版权

iframe在vue中的使用

在vue中引入iframe设置src属性 两种方式

  1. 使用绝对路径 例如https://www.baidu.com/
  2. 使用相对路径 要引入的文件放在public下 src:“ofd/ofd.html”
  3. 在这里插入图片描述
  4. vue中调用iframe引用的ofd.html里面的方法
  5. 第一步 在ofd.html 创建隐藏的按钮

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210301101005331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDIwOTk0,size_16,color_FFFFFF,t_70在这里插入图片描述

第二部 vue中
mainFramePdf是vue中iframe的id initBtn是ofd.html中的按钮id
在vue中使用initBtn按钮的click() 去触发ofd.html中initObject（）函数
在这里插入图片描述
传参：
目前没找到方法 在ofd.html中调用vue中的变量或方法 网上的parent.vm没成功
ps：在index.html中使用iframe引用index1.html 在子页面可以使用parent.+ 变量或函数名 直接调用
我用的是通过页面传参
例如 在URL后面用？做链接 width=1300是要传递的宽度 &连接下一个传参
在这里插入图片描述
在ofd.html中使用location.search 获取到URL后面所有参数 通过substr等方法处理数据
在这里插入图片描述

qq_38420994
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目中使用iframe引入本地html页面
bamboozjy的博客
11-13 7122
1.将html文件放到项目根目录下的public/static(static自己新建就好了)文件夹下,rmt-bmp是我的项目名,将需要的html文件放到public下的static文件夹下 2.然后直接在页面中使用iframe,src路径直接static开头,打包好的项目就是已public为根目录的,所以直接这样引用即可. <iframesrc="static/screenNewTest/index.html"frameborder="0"class="iframe"></...
【vue】iframe相关问题
Qxn530的博客
03-02 5597
iframe刷新、子页面关闭iframe所在弹窗、iframe进度条一直加载中、iframe传参、iframe页面中需要使用wordexport等功能、iframe在弹窗中、iframe展示PDF不显示
vue3使用ifame标签引用html页面,如何vue页面向html页面传递数据
最新发布
weixin_65644264的博客
06-24 247
如果数据不需要即时性或频繁更新，你可以使用 `localStorage` 或 `sessionStorage` 来存储和读取数据。- **安全性考虑：** 使用 `postMessage` 时，务必验证消息来源 (`event.origin`)，以防止恶意代码注入。- **跨域问题：** 如果 Vue 页面和 HTML 页面不在同一个域下，需要确保服务器允许跨域通信，或者使用安全的消息传递方式。- **在 HTML 页面中接收消息：**- **在 Vue 页面中发送消息：**
vue中 iframe 引入 本地静态html文件，vue-cli2与vue-cli3引用的差异
rudy_zhou的博客
05-08 8535
vue中 iframe 引入 本地静态html文件，vue-cli2与vue-cli3引用的差异。引言Vue-cli 2.0 构建的项目引用Vue-cli 3.0 构建的项目引用不考虑项目构建版本的方法1.如果你是webpack工程师，你就自己配置打包方式。2.使用require() 引入总结 引言   在写个人网站的时候，需要用到 iframe 引用本地静态的 html 文件，发现引用方式的一些差异，在此分享一下。 Vue-cli 2.0 构建的项目引用 在vue-cli 2.0 构建的项目中，如果要使用
Vue中引入路径（图片、iframe）的几种方式
yiyueqinghui的博客
12-17 3898
1、在template的img中直接引入相对路径 <img src="../../static/img/car.png" /> 这种引入会被webpack处理（有些处理为base64，有些给图片加hash修改图片名字），总之不需要担心打包后的图片路径问题 2、使用v-bind绑定src路径，不会被webpack处理，因此需要使用require手动引入 <img :src="require('../static/img/03.jpg')" alt=""> <img :src=
在vue中实现嵌套页面(iframe)
10-15
在Vue中使用`iframe`，我们可以直接在模板中插入`iframe`标签，并设置相应的属性。 首先，将要嵌入的`iframe`页面放置在Vue项目的静态资源目录下，比如`static`文件夹。这样可以确保在开发环境中，Vue CLI能正确地...
VUE页面中加载外部HTML的示例代码
08-29
该示例代码中使用了两个组件，分别是HtmlPanel.vue和htmlViewSample.vue， HtmlPanel.vue组件用于加载外部HTML文件，并将其显示在页面上，而htmlViewSample.vue组件则用于将HtmlPanel.vue组件实例化，并将其显示在...
iframe中页面显示不全1
08-08
在网页设计中，`<iframe>`元素是一种非常实用的工具，它允许我们在一个网页中嵌入另一个网页，比如展示文档、视频或者地图等。当遇到"Iframe中页面显示不全"的问题时，通常是由于iframe的尺寸设置不当或者与被嵌入...
vue项目中使用vue-layer弹框插件的方法
10-15
在Vue项目中，为了实现各种弹框功能，如提示、确认、信息框等，我们可以使用vue-layer这个弹框插件。vue-layer是一个基于Vue.js的轻量级弹窗组件，它提供了丰富的弹框类型和自定义选项，适用于多种场景。 首先，...
利用iframe在网页中显示天气附效果截图
09-28
在这个例子中，我们将探讨如何利用`iframe`来在网页中显示天气，并结合提供的CSS和HTML代码来理解其工作原理。 首先，`iframe`的基本结构是这样的： ```html <iframe src=...
vue组件使用iframe加载本地html页面
weixin_43575792的博客
09-28 4458
需求 最近遇到一个需求，一个现成的页面使用jquery实现的，现在要嵌入到vue里，笔者表示要偷个懒，不想再画时间改成vue形式的,就采用iframe将改html直接渲染到界面上 操作 1.准备好自己的html页面，比如笔者的html文件夹叫做card,入口是index.html,放在根目录的public目录下 2.在你的vue组件页面放入iframe，注意这里路径很重要，因为不仅要在运行的时候正常显示，打包后也需要正常显示 ，所以要使用的路径相当于跟vue项目public目录下的入口文件index.h
html iframe 相对路径,vue中 iframe 引入 本地静态html文件，vue-cli2与vue-cli3引用的差异。...
weixin_34304274的博客
06-29 2734
引言在写个人网站的时候，需要用到 iframe 引用本地静态的 html 文件，发现引用方式的一些差异，在此分享一下。Vue-cli 2.0 构建的项目引用在vue-cli 2.0 构建的项目中，如果要使用 iframe 引用本地的静态 html 文件，静态文件需要放置在和 src 同级的文件加夹 static 中。如下图：在使用 iframe 的地方直接写 “相对路径” 就行，如下图：这里还是需...
Vue中内嵌入Iframe页面(是Jsp)进行子Iframe向Vue发送参数通信
zhh1996075的博客
08-26 1414
Vue页面中接参数 mounted() { //由于this指向的是请求参数中的内容，所以要再外层定义一个别名this let thar = this; window.addEventListener("message", function (event) { console.log(event.data); thar.backVue(event.data); })； } meth...
vue项目中，调用iframe子网页中的方法 和在iframe子页面中调用vue父页面中的方法。
qq_36519327的博客
09-21 7579
iframe
vue 中使用iframe内嵌页面并通信
Marzlam的博客
03-09 762
vue与iframe通信
vue --使用 iframe 嵌入页面
King Saj
12-11 1456
<template> <div v-loading="loading" :style="'height:'+ height"> <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" /> </div> </template> <script> export default { name: "Swagg
2021-07-13 HTML基础（二）
前端卡卡西的博客
07-13 745
5.img标签 1.<img src=“图片路径” 绝对路径 相对路径 网络路径 base64位> 2. 绝对路径: 从盘符开始的路径，就是绝对路径 (不要用绝对路径) <img src="D:/图片素材/无标题2.png" alt=""> 3.相对路径: 相对于当前文件而言, 找到另一个文件的路径 当前目录: ./ 表示当前文件夹 ./可以忽略不写 上层目录: …/ 表示返回上一级文件夹 <img src="./图片素材/2.png" alt="">
vue项目引入iframe
weixin_38879321的博客
03-14 2168
项目引入iframe 一、主程序 页面引入iframe <iframe ref="iframe" src="http://localhost:5555/#/login" frameborder="0" scrolling="no" /> iframe传参/自适应 mounted () { const mapFrame = this.$refs.iframe const iframeWin = mapFrame.contentWindow
在vue3中引用HTML页面
05-26
在Vue3中，可以使用`<iframe>`标签来引用HTML页面。具体步骤如下： 1. 在Vue3组件中添加`<iframe>`标签，如下所示： ```html <template> <div> <iframe src="https://www.example.com"></iframe> </div> </template> ``` 2. 在`<iframe>`标签中指定要引用的HTML页面的URL地址，如上面示例中的`src="https://www.example.com"`。 3. 可以使用CSS样式来控制`<iframe>`标签的大小和位置。 需要注意的是，`<iframe>`标签会创建一个独立的浏览器上下文，因此在引用外部HTML页面时需要注意安全性问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值