在dataV的iframe组件，嵌入本地部署的http网站

原创 已于 2024-12-12 13:31:22 修改 · 1.1k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#http #网络协议 #python #flask #阿里云 #html

于 2024-12-12 11:13:29 首次发布

1.首先在datav里插入iframe组件，并且填写你的http网站url

                 

2.首先我们的网站如果是http头，那么就存在一个安全问题。‌这是浏览器的安全策略限制，有两种办法解决：

1.将HTTP资源转换为HTTPS‌：最直接的解决方法是将所有的HTTP资源转换为HTTPS。这可以通过配置服务器或使用代理服务器来实现。例如，可以使用nginx等服务器软件，通过SSL模块将HTTP资源包装成HTTPS资源‌34。‌

2.修改浏览器设置‌：在某些情况下，可以通过修改浏览器设置来允许HTTPS页面嵌入HTTP资源。例如，在Chrome浏览器中，可以在设置中允许不安全的内容加载。具体操作是进入“设置 - 隐私设置和安全性 - 网站设置 - 不安全问题”，然后将HTTPS页面域名和HTTP页面的域名都添加进去‌。

        转换https大部分需要花钱，我们这里先选择第二种。需要打开浏览器的设置，在网站权限这里添加让datav网站允许不安全内容，不然iframe里不会显示我们的网站而是一直透明。

      &nb

最低0.47元/天 解锁文章
学习Vue之路— —记录篇（关于使用DataV实现可视化大数据滚动栏目展示中点击按钮实现动态数据切换）
qq_41684130的博客
04-28 2901
项目场景： 在利用若依（RuoYi）系统基础上，结合其他大佬的大数据可视化界面，在使用滚动数据面板上进行动态数据切换操作的过程 问题描述 使用DataV展示滚动栏目数据展示，点击按钮进行动态数据切换 <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" :type="type" /> 原因分析： 在其中
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
明天也要努力的博客
06-18 1万+
在 public 文件夹下新建 static 文件夹，然后将 html 文件及相关引用拷贝到 static 文件夹下。 2. 相互通信 vue 文件完整代码 html 文件完整代码 定义和用法： postMessage() 方法用于安全地实现跨源通信。语法： 参数 说明 otherWindow 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。 message
https iframe嵌套http页面
lbchenxy的博客
10-18 3万+
今天遇到了新的需求，我们公司协议为https的，要显示一个http的页面（必须显示这个页面），我刚开始没有关注到这个问题。就一个iframe这不是很简单吗。嵌套进去不就行了。 问题从这里才真正开始 本地完美运行，搞定了。打包上到测试环境。嘣，空白页面。 脑子一片空白 难道是需要动态设置宽高，设置之后没用。 百度吧，查找解决办法。 看到这样一个信息 page - iframe - status h...
ruoyi 若依框架在浏览器上面打开新页面标签（可视化大屏）
yang_weidong的博客
06-26 1万+
ruoyi 若依框架在浏览器上面打开新页面标签（可视化大屏）
iframe嵌入https地址,浏览器却访问http协议后不识别报错
weixin_47660078的博客
10-14 9364
当时本地嵌入此地址正常访问，部署测试环境后报错 iframe嵌入必须是https地址，由于当时https域名配置的证书不安全，浏览器认为此链接不安全，所以浏览器访问了http协议，就出现了这个报错，我的解决方式是可以和运维沟通配置安全证书或者运维同学配置访问http协议强跳转指https,至此就解决了这个问题，如有其它解决方式，大家一起讨论一波~~~ ...
https使用iframe嵌入http资源的问题
热门推荐
lao_pei的专栏
06-22 6万+
  1）目前现象：           https 网站 使用iframe嵌入http资源网站的内容，会弹出“是否加载不安全的内容”的提示，点击“加载”按钮后显示正常。          对用户来说显示不友好。  2）问题原因：          https中使用http的资源时，浏览器会认为可能会不安全， 会自动弹出“是否加载不安全的内容”的提示。          该提示由浏览器自动弹出，不能...
iframe嵌入链接本地环境正常，正式环境重定向到登录解决
02-28
1. **本地环境**：使用`<iframe>`标签在`http://localhost/test.html`页面中嵌入`http://localhost:3000?token=123`链接，页面能够正常显示。 2. **正式环境**：尝试在`http://localhost/test.html`页面中嵌入`...
使用iframe在网页中嵌入其他网页的方法
09-28
`iframe` 是 "inline frame" 的缩写，它允许我们在主页面中嵌入一个独立的、可自定义的子页面。下面我们将详细讲解如何使用`iframe`在网页中嵌入其他网页的方法以及相关属性。 首先，`<iframe>` 标签的基本结构如下...
关于https页面使用ifream嵌套http页面
孙少的博客
10-18 8184
关于https页面使用ifream嵌套http页面
在https页面，通过iframe实现http跨域访问（解决iframe页面点击浏览器刷新按钮后返回首页问题）
lyn1772671980的博客
05-30 4112
在https项目页面，利用iframe嵌入http项目页面，用nginx配置抓发后解决跨域，浏览器F5刷新后，请求的http项目的页面返回首页，并不是url对应的页面（https、http项目均为vue项目）解决方案：http项目改为history路由，iframe修改src。问题原因：由于http项目用的hash路由，导致刷新后返回首页。
前端Docker部署 http / https服务&使用 iframe嵌套页面遇到的问题&页面403 Forbidden问题
Alice_hhu的博客
05-05 5125
中心思想：先部署 http服务，再部署 https服务转发到 http服务上
https iframe嵌套http页报错
定格空间
02-26 3962
浏览器默认是不允许在HTTPS里面引用HTTP页面的，ie下面会弹出提示框提示是否显示不安全的内容，一般都会弹出提示框，用户确认后才会继续加载，但是chrome下面直接被block掉，只在控制台打出信息。 page - iframe - status http - http - allowed http - https - allowed https- http - not allowed https嵌套http不支持 https- https - allowed https - https - ins.
使用iframe标签嵌入外部网页的示例及详解
m0_73734137的博客
01-06 4279
iframe（内联框架）是一种HTML元素，它允许在一个网页中嵌入另一个网页。通过使用iframe，可以在一个页面中显示来自不同源的内容，例如嵌入另一个网站的地图、视频或表单等。属性指定了iframe的宽度和高度。如果浏览器不支持iframe标签，那么会显示。在这个示例中，我们使用iframe元素来嵌入一个网页，其中。属性指定了要嵌入的页面的URL，
iframe之嵌套方案总结
xiaoxigua666的专栏
01-12 7905
前段项目中有一个比较变态的需求，之所以变态，是因为我们的产品展示方案基于维护和安全考虑做的比较复杂。          大体流程时，我们想要实现通过外站引入一个脚本后，输出我们的产品内容到对方站上。 所以我们的脚本是用js document.write了一个iframe页面，此iframe页面 A 就是我们的产品业务： document.write('');          此if
VUE使用 iframe 嵌入网页
lilylry的博客
08-11 1万+
但若嵌入的网页是第三方网页，对方的操作可能存在安全风险。为了限制的风险，HTML 提供了sandbox属性，允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱”。allow-storage-access-by-user-activation：允许在用户激动的情况下，嵌入的网页通过 Storage Access API 访问父窗口的储存。问题：容器云嵌入该工程时使用iframe嵌入，嵌入的路径是动态的，路由的代理会产生问题，运维功能嵌入其他平台时，路径也是动态的同样也需要配置。
将 ONLYOFFICE 协作空间的公共房间嵌入到网页
m0_68274698的博客
12-08 870
在 ONLYOFFICE 协作空间2.0版本中，我们新增了公共房间，可与外部用户共享文件。公共房间可以集成到您的网站或单页应用程序 (SPA) 中，访问者无需下载或注册自己的协作空间帐户即可查看文档。我们在本文中介绍了分步指南。
在vue中嵌入iframe页面
u010227042的博客
08-21 2万+
一、嵌入iframe页面业务场景 项目是一个物流运营平台的管理系统，系统中对接了第三方的客服系统。因此这里需要在自己的页面中嵌入三方客服聊天的页面（这里对接了智齿）。ps：别问我为什么不自己写一个聊天的功能，问就是不知道。 二、iframe是什么 ifram标签规定了一个内联框架，让我们有可能在当前的HTML文档中嵌入另外一个文档，目前所有的主流浏览器都支持iframe标签，当然为了以防万一你可以在iframe标签中写入提示文本，以提示用户当前使用的浏览器不支持iframe。 <iframe
iframe内嵌链接常见问题
一个希望世界和平的前端程序猿的博客
12-26 1万+
iframe内嵌链接常见问题
若依vue使用DataV设计大屏报错多是版本问题
最新发布
qq_41816505的博客
11-13 638
④把案例demo代码复制到vue项目里面，就可以正常显示DataV的大屏。的源码，按照里面对用的版本号就行了。下面两条安装是指定版本的。
使用Flex将HTML页面嵌入MXML的Iframe组件
此外，由于 flex-iframe 依赖于特定的浏览器引擎，开发者在部署应用时需要注意平台相关的依赖库是否完整。例如，在 Windows 平台上可能需要额外的 DLL 文件，而在 macOS 上则需要相应的 dylib 文件。 ### 总结 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值