vue 嵌入iframe显示不正确问题

最新推荐文章于 2024-04-27 08:56:53 发布
原创 最新推荐文章于 2024-04-27 08:56:53 发布 · 6.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍在Vue CLI3中如何正确配置静态文件，以确保在项目中能够正常引入和显示html文件。与Vue CLI2不同，Vue CLI3要求将静态资源放置在public目录下的static文件夹中。 
<iframe src="静态文件路径" frameborder="0" scrolling="auto"></iframe>

之前在vue-cli2中静态文件是放在static下可以正常引入，但是vue-cli3中必须放在public里新建的static文件夹中这样才能正常显示html文件

vue-cli2中

vue-cli3

 

需要注意的是：iframe的src属性直接写“static/index.html”即可，这里src的根路径就是public。

sunlizhen
关注
海康摄像头插件嵌入iframe时视频播放插件位置问题
wv112406的博客
04-01 2672
参考：https://juejin.cn/post/6857670423971758094。原因：没有按照iframe相对位置计算视频插件位置。
海康威视摄像头iframe+vue实现多窗口抓拍
qq_38388578的博客
05-21 3034
下载官方demo，安装浏览器驱动请参考https://blog.youkuaiyun.com/qq_38388578/article/details/116047374 摄像头抓拍保存到本地，我们在本地搭建网络盘，将抓拍图片放到指定目录，即上传到本地服务器，不用走接口上传， 注意： 1、在public新建hk文件夹，将官方demo需要的依赖复制到文件夹下，在public文件加下新建iframe.html文件， iframe.html <!doctype html> ...
vue用iframe播放海康视频
weixin_42674490的博客
02-28 3930
由于项目需要同时显示两个相机的视频，使用上一篇文章封装的组件无法完成，因为当时webVideoCtrl.js是直接定义在全局的，$相当于一整个项目的window,无论怎么使用都只能在第一次定义的dom位置显示视频（如果有更好的方法欢迎评论区告知），因此使用了iframe隔离window。 1.在public地址下添加iframe.html 2.iframe.html <!doctype html> <html> <head> <title></
Vue 嵌入iframe，没有显示对应的页面，显示空白或者拒绝了访问，解决的一个思路
热门推荐
普普通通的博客！
06-29 1万+
在给vue使用iframe嵌入页面的时候，明明没有bug，页面就是显示不出来，白屏了。调了很多iframe的设置，但是就是没有效果。 后来发现是我访问的时候，本机是https，但是访问的地址是http，有个跨域的问题。主要就是浏览器认为不安全。去搜索了一下Http和Https的跨域问题，结论如下：那么解决方案可以是做个代理转发，或者我选择了一个笨办法，就是我去试了下我要嵌入的这个链接https能不能访问，然后发现可以，我就自己自己加了一个s，就可以访问了~...
前端vue-element 登录随机生成数字验证码_element ui 随机验证码(1)
2401_84447297的博客
04-27 449
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue下iframe标签页,切换标签页,iframe不重载
12-05
vue项目中一个模板组件，不同iframe的src地址，对应不同的路由，不同标签页，且切换标签页不重载。这种客户的要求是特例在网上没有，所以纯自行手码。由于项目在vuex保存了标签页，所以初次进入该组件时，调用了一次...
Vue中对iframe实现keep alive无刷新的方法
10-16
然而，在使用Vue开发应用时，我们可能会遇到需要在页面中嵌入iframe元素，以实现某些特定的交互或功能需求。当在Vue应用中使用路由管理页面跳转时，通常我们会希望在路由切换时保持iframe内容不变，而不是每次都重新...
vue 多页面iframe不刷新_vue tab嵌入iframe切换不刷新，相对完整的方案
weixin_39867594的博客
12-19 2231
说到Vue的简单、便捷、高效，谁用谁喜欢，自然企业应用也来玩一把，三大经典组件：树控件，网格控件，选项卡控件；本章先说选项卡tab控件的嵌入iframe。本次主要解决以下问题：1.tab控件混合vue-component-view与iframe-view;2.切换tab, iframe-view 保持原界面不刷新，与keep-alive效果等同;3.关闭tab中的iframe-view后，将重新打...
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。... <iframe src=”../../static/plusPro.html...补充知识：关于VUE嵌套iframe的一系列问题 此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，
vue与iframe之间的信息交互的实现
11-20
说一下我的使用场景：在vue中使用...3.vue如何向iframe内传送信息 可以通过H5新属性 postmessage 注释：【postMessage是有点类似于UDP协议，就像短信，是异步的，你发信息过去，但是没有返回值的，只能内部处理完成以
vue2+iview2，使用tabs嵌套iframe，关闭一个tabpane导致下一个tabpane内嵌套的iframe显示不出来（被隐藏了、白屏）。
weixin_42640226的博客
01-31 1177
vue2+iview2在使用iview的tabs组件时，关闭tabs遇到的白屏问题
vue 嵌套iframe第一次无数据_「Vue 入门系列」第一期，新手快速入门指南，初识 Vue...
weixin_39647412的博客
11-20 199
引言Vue 是 JavaScript 开发人员非常喜欢的技术之一，所以，我希望能为那些想学习 Vue 技术的朋友们提供一些简要的说明，使它形成一个系列，帮助他们迈入 Vue 开发的大门。学习 Vue 的先决条件熟悉 HTML 和 CSS ，可以尝试用它们做一些页面布局了解 JavaScript 的基础知识对 ES6 的语法和新特性有一定了解会用 npm 进行全局安装和项目依赖安装什么是 Vue？V...
iframe定位问题
huitest的博客
08-05 1万+
iframe是什么，其实就是页面重新再次嵌套了一个网页，iframe里面一样有html开始结束标签，然后有title,body,就是网页里面套网页，那么selenium操作浏览器只是对当前页面进行操作，那么既然iframe是一个网页，那么要对这进行操作，那么就需要先进入这个网页才可以， 打开浏览器时，默认在主文档里面， 那么只能查找主文档里面的元素， 子iframe里面的元素不能查找 sele...
vue向ifarm传值_Vue倔强青铜-入门和组件化通信
weixin_39624716的博客
11-22 199
入门作为前端最容易上手的框架，Vue入门其实没啥说的，我放一段清单的代码，大家能看懂就说明能上手了<template> <div id="app"> <h1>{{title}}</h1> <div> <input type="text" v-model="val"> <butt...
vue 嵌套iframe第一次无数据_VUE学习二------VUEX深入理解
weixin_39955421的博客
11-23 553
vuex是什么 vuex是一个专本为vue.js开发的状态管理模式，它采用集中式的存储管理所有组件的状态。并以相应的规则保证状态以一种可预测的方式发生变化。为什么要使用vuex 下图是一个官网的简单的单向数据流的概念但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。对于问题一，传参的方法对于多层嵌套的组件将会非常繁...
vue 嵌套iframe第一次无数据_学 Vue 看这个就够了
weixin_39681161的博客
11-21 674
1.Vue框架描述Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。兼容性：Vue 不支持 IE8 及以下版本，因为 Vue ...
关于iframe定位碰到的问题。
weixin_34392435的博客
11-23 711
这几天在做自动化测试的时候发现一个问题，用JQUERY定位时，总是报错，MES：JQUERY IS NOT DEFINED。 检查自己定位没有问题，后来想是不是语法出了问题。 切换成XPATH来定位，还是报错。 然后再语法调试，发现NAME属性不能定位，不具有唯一性，有三个NAME值一样的IFRAME。 当时具体情况是：IFRAME有三个属性，NAME，SRC，CLASS。三个IFRAME...
【vue】iframe相关问题
Qxn530的博客
03-02 6658
iframe刷新、子页面关闭iframe所在弹窗、iframe进度条一直加载中、iframe传参、iframe页面中需要使用wordexport等功能、iframe在弹窗中、iframe展示PDF不显示
iFrame的定位
weixin_30301183的博客
02-10 251
原文转自：WebDriver学习笔记（七）iFrame的定位 原文作者：米阳MeYoung iFrame嵌套的页面非常常见，然而iFrame内的页面元素我们没办法按常规思路去定位，操作。 平时测试如果遇到代码没错，但就是定位不到页面元素，这时你就应该第一个反应元素是不是嵌套在iFrame内。 如果是，那么我们的思路就是先定位iFrame再定位iFrame内的元素，这个有点类似于页面层...
vue嵌入iframe页面
最新发布
05-16
下面是Vue嵌入iframe页面的步骤： 1. 在Vue组件中添加一个iframe元素，如下所示： ```html <iframe :src="iframeSrc"></iframe> ``` 2. 在Vue组件的data选项中定义iframe的src属性，如下所示： ```...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值