vue项目中使用iframe标签引入外部html,并进行数据交互!

最新推荐文章于 2024-01-30 17:31:26 发布
最新推荐文章于 2024-01-30 17:31:26 发布
阅读量6.2k 收藏 22
点赞数 5
分类专栏： vue HTML JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43627981/article/details/102701695
版权
JS 同时被 3 个专栏收录
18 篇文章 4 订阅
订阅专栏
vue
12 篇文章 0 订阅
订阅专栏
HTML
1 篇文章 0 订阅
订阅专栏

首先是vue中引入iframe的src怎么引用路径的坑!

首先我们需要把静态的html文件和css,js文件放在public目录下.

在iframe标签中引用的时候不要使用public/下的什么,这是不对的.去掉public,直接引用即可.(还是打包后发现放在public文件下的文件都会放在根目录,并没有public这个目录)

下面就介绍一下怎么交互的问题.

vue文件里的写法:

iframe文件里的js的写法:

 

芈鹿
关注
  • 5
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
VUE：iframe访问并展示外部网址或者视频
干饭搬砖两不误。
03-26 6093
简介 在H5网址、APP等项目中，会有访问外部链接、播放网上视频的需求。 具体实现 上一个页面，传入三个 参数，分别是type（0 图文，1 视频，注意最好是用字符窜的格式）、url（图文或视频的网络外部链接地址）、logoUrl（logo图，用来展示视频封面用的）。 <template> <div> <iframe v-if="materialData....
如何将html模板资源转为vuecli项目(1)
最新发布
2401_84435138的博客
05-02 679
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档**开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-Ykj0q6Vt-1714647625648)][外链图片转存中…(img-xkFYXC2k-1714647625649)]
Vue中嵌入原生HTML页面
weixin_38982591的博客
01-30 2631
但是vue目前暂时没找到有类似功能相关文档，所以我采用iframe嵌套的方式。在mounted生命周期中去绑定具体Iframe的页面。在mounted中加监听事件，并配上处理监听对象的方法。在data中定义一个iframe绑定的页面的对象。在method中定义方法，用于处理监听的事件。在html中接收vue端传过来的值。发送信息到iframe页面。html页面中的代码。
VUE iframe 打开第三方网站
阿毛~
09-16 2334
我所做得是 vue的公众号项目 嵌套倒 iframe 里面 点击某个按钮去跳转到第三放网站 首先，先判断 按钮所在页面 一： 判断页面是否被嵌套在iframe里 console.log(window.self === window.top); ( 1. 如果返回false –> 说明页面被嵌套在iframe中了 2. 如果返回true –> 说明页面并没有被嵌套在iframe中 ) 点击按钮 通常使用 window.location.href、loc...
iframe中加载html,在iframe中加载外部html并访问内容
weixin_42566121的博客
05-31 2211
我只需要提供src属性即可加载外部页面时，我需要知道如何访问iframe内容。在iframe中加载外部html并访问内容我正在使用iframe在jquery对话框中加载HTML页面。在这里，我不能修改内容(预填充HTML表单的内容)var page = "form.html";var $dialog = $('.html('')我看过here，但它不工作，因为它不知道的HTML内容，但(可能这是我...
iframe的快速使用及方法的调用（HTML中引入另一个HTML文件）
z1093541823的博客
04-14 2100
iframe的快速使用及方法的调用； HTML中引入另一个html文件；
5 iframe嵌套页面_vue iframe嵌套外部网页
weixin_42522131的博客
01-12 1991
下午经理让我在客户服务平台创建一个新的路由,把我们之前写的报表工具嵌套进去,之前的是通过ip访问的,讨论了一会决定用神器 iframe,直接嵌套进去,之前也写过,代码这个东西,CV才是精髓,去某度看了一下,随后开始操作首先创建好了路由的权限,让他在页面也可以进行点点点的操作,之后创建vue页面去页面看看成功出现,下面看一下我之前开发的页面的样子,记住这个ip,这个...
葡萄城【wyn、 SpreadJS、活字格】vue中使用
05-11
在Vue项目中使用SpreadJS，需要先安装其npm包，然后在Vue组件中导入并挂载。SpreadJS允许开发者创建、编辑和显示复杂的工作表数据，通过数据绑定实现与Vue数据模型的实时同步。此外，可以使用自定义指令或者计算属性...
div嵌套html不用iframe
09-28
`<script>`标签引入了jQuery库，并定义了`click`事件的处理器。 7. **优化与注意事项** - 确保引入的jQuery库版本与你的代码兼容。 - 如果`index.jsp`不在同一个域下，可能会受到同源策略的限制，导致无法加载。 ...
vue3_youtube_player:Vue 3和youtube的一些测试
04-01
在这个名为“vue3_youtube_player”的项目中，我们看到作者试图集成 YouTube 播放器功能到 Vue 3 应用中，这将涉及与 YouTube API 的交互以及Vue组件的创建和使用。 首先，我们需要了解Vue 3的主要特性。Vue 3 引入...
使用postMesssage()实现iframe跨域页面间的信息传递
09-02
在Web开发中，由于同源策略的限制，不同源的页面之间无法直接进行通信，这包括主页面与嵌入的跨域iframe之间的交互。然而，HTML5引入了一种新的API，即`postMessage()`方法，它允许不同源的窗口之间进行安全的信息...
iframe 跨域解决方法
04-10
在Web开发中，`iframe` 是一个非常常用的元素，它允许我们在一个页面中嵌入另一个网页。然而，由于浏览器的同源策略限制，当`iframe`加载的页面与包含它的页面不在同一个域名下时，就会遇到跨域问题。这篇博客将深入...
vue页面中嵌入html页面跨域,vue内嵌iframe并跨域通信
weixin_32142107的博客
06-03 2032
Vue组件中如何引入iframe？export default {data () {return {src: '你的src'}}}如上，直接通过添加iframe标签，src属性绑定data中的src，第一步引入就完成了vue如何获取iframe对象以及iframe内的window对象？在vue中，dom操作比不上jquery的$(‘#id’)来的方便，但是也有办法，就是通过refexport de...
vue与外部html通信,VUE页面实现加载外部HTML方法
weixin_39730911的博客
06-15 598
VUE页面实现加载外部HTML方法VUE页面实现加载外部HTML方法前后端分离，后端提供了接口。但有一部分数据，比较产品说明文件，是存在其他的服务器上的。所以，在页面显示的时候，如果以页面内嵌的形式显示这个说明文件。需要搞点事情以达到想要的效果。本文主要和大家介绍VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。不...
html，iframe和父窗口的数据交互
大炮哥的博客
12-15 508
假设有以下代码 <!DOCTYPE html> <body> <iframe id="iframe"></iframe> </body> <script> //给父window添加消息监听 window.addEventListener("message", (event) => { console.log("父window接收到消息："+event.data); }, false); //fram
Vue中使用iframe加载HTML文件
m0_57996540的博客
05-11 4665
Vue中使用iframe 嵌入HTML 页面
Vue中引入HTML静态资源文件（包含数据的传递）（html大屏）
热门推荐
weixin_49376462的博客
07-29 1万+
Vue中引入HTML静态资源文件（包含数据的传递），引入可视化大屏并出传递数据。
在 vue cli 4 项目中引入外部 html 项目，解决 外部 html 跳转到 vue 路由页面 404 问题
cimo的博客
11-30 2326
最近有个项目，本来使用 jq + bootsrap 开发，因此首页用了 jq + bootsrap 开发为 html 页面，并用 jq 做了很多动画。 后来因为种种原因需要使用 vue 开发接下来的页面，但是重新做一个带多组动画的首页很麻烦，于是想到将首页home.html以及它的静态资源assest文件夹作为独立项目引入到 vue cli 中。 遇到了不少问题，第一天搞到凌晨2点，没搞明白，第二天不到1个小时搞定… 所以说，太累的话，工作效率不高，还浪费时间，还不如睡觉。!!!∑(ﾟДﾟノ)ノ 怎么做？
vue在线预览pdf-- “iframe“ 标签或者window.open()
qq_39877681的博客
06-16 3365
vue在线预览pdf;“iframe” 标签；window.open()
springboot vue前后端分离项目如何使用axios进行数据交互
03-07
前端通过axios发送请求，后端通过@RestController注解的控制器接收请求并处理数据，最后将处理后的数据返回给前端。在前端，可以使用axios的拦截器来处理请求和响应，以及设置请求头等。在后端，可以使用Spring Boot...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值