5 iframe嵌套页面_vue iframe嵌套外部网页

最新推荐文章于 2024-07-19 03:10:53 发布
最新推荐文章于 2024-07-19 03:10:53 发布
阅读量1.9k 收藏 4
点赞数 2
文章标签： 5 iframe嵌套页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42522131/article/details/112587297
版权
本文介绍了如何在Vue项目中使用iframe嵌套外部报表工具，通过动态设置URL解决配置问题。首先创建路由并赋予相应权限，然后在Vue页面中嵌套iframe，遇到样式问题后，调整URL处理方式，通过.env文件配置全局变量。最后，为满足需求，根据右上角的ciic188 ID动态拼接报表页面的URL，但还需解决ID获取问题。
摘要由CSDN通过智能技术生成

    下午经理让我在客户服务平台创建一个新的路由,把我们之前写的报表工具嵌套进去,之前的是通过ip访问的,讨论了一会决定用神器 iframe,直接嵌套进去,之前也写过,代码这个东西,CV才是精髓,去某度看了一下,随后开始操作

    首先创建好了路由的权限,让他在页面也可以进行点点点的操作,之后创建vue页面

e25cc9dd17a3ad0bb256e4ca597e9d20.png

去页面看看

87a0f2cbd35737d4c9b6d0c285b2bdbf.png

    成功出现,下面看一下我之前开发的页面的样子,记住这个ip,这个页面非常完美啊,有条件查询,有分页,有......

6c32321916800be369d5cf1d93e52301.png

    然后直接使用iframe嵌套进去

    嵌套进去之后,属实有点怪

6ba1bcfe1b0dec04928102786de43cd2.png

最低0.47元/天 解锁文章
天青色水玉
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE：iframe访问并展示外部网址或者视频
干饭搬砖两不误。
03-26 6115
简介 在H5网址、APP等项目中，会有访问外部链接、播放网上视频的需求。 具体实现 上一个页面，传入三个 参数，分别是type（0 图文，1 视频，注意最好是用字符窜的格式）、url（图文或视频的网络外部链接地址）、logoUrl（logo图，用来展示视频封面用的）。 <template> <div> <iframe v-if="materialData....
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”0″ scrolling=”auto”style=”position:absolute;top: -300px;left: 0px;”></iframe> 补充知识：关于VUE嵌套iframe的一系列问题 此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，
vue iframe嵌套外部网页
wxzxmq的博客
06-17 3688
<template> <div> <iframe src="外部网页url" id="mobsf" frameborder="0" style="position:absolute;"></iframe> </div> </template> <script> export default { data () { return { } }, mounte
VUE使用 iframe 嵌入网页详解
weixin_65644264的博客
06-25 577
在 Vue.js 项目中使用iframe。
vue项目中使用iframe标签引入外部html,并进行数据交互!
qq_43627981的博客
10-23 6256
首先是vue中引入iframe的src怎么引用路径的坑! 首先我们需要把静态的html文件和css,js文件放在public目录下. 在iframe标签中引用的时候不要使用public/下的什么,这是不对的.去掉public,直接引用即可.(还是打包后发现放在public文件下的文件都会放在根目录,并没有public这个目录) 下面就介绍一下怎么交互的问题. vue文件里的写法: ...
（八）vue使用iframe嵌入网页
热门推荐
w_t_y_y的博客
11-15 3万+
1、列表页面： this.$router.push({ name: 'userTemplate', params: { reportUrl: reportUrl, reportType: reportType }}) 点击查看后触发事件，带入参数跳转到userTemplate页面；reportType有两种类型，0表示reportUrl是绝对网址，1表示reportUrl是本...
VUE iframe 打开第三方网站
阿毛~
09-16 2351
我所做得是 vue的公众号项目 嵌套倒 iframe 里面 点击某个按钮去跳转到第三放网站 首先，先判断 按钮所在页面 一： 判断页面是否被嵌套在iframe里 console.log(window.self === window.top); ( 1. 如果返回false –> 说明页面被嵌套在iframe中了 2. 如果返回true –> 说明页面并没有被嵌套在iframe中 ) 点击按钮 通常使用 window.location.href、loc...
vue项目多入口,iframe嵌套.zip
06-19
在本项目“vue项目多入口,iframe嵌套.zip”中，开发者探索了如何在Vue项目中实现多入口配置，并利用iframe进行页面的嵌套。让我们详细探讨这些概念。 1. **Vue 多入口配置**： 在一个大型应用中，通常需要为不同的...
vue3嵌套iframe及相互通迅
05-22
vue3嵌套iframe及相互通迅，包含vue嵌套iframe的通用组件，vue 与 iframe 相互通讯的公共方法；同时包含apache部署vue的配置文件，以及vue访问apache代理的静态html页面。 实现通过vue路由 加载第三方服务页面，实时...
div嵌套html不用iframe
09-28
在网页设计和开发中，有时候我们需要在不使用`...通过以上步骤和知识点，我们可以在不使用`iframe`的情况下，利用`div`和jQuery实现页面内容的嵌套，这不仅可以提高网页性能，还能更好地控制和定制页面的显示效果。
在vue中嵌入iframe页面
ForgivenCheney的博客
07-29 1万+
[Talk is cheap. Show me the code] 不想看理论知识请直接移步最后代码示例。 一、嵌入iframe页面业务场景 项目是一个物流运营平台的管理系统，系统中对接了第三方的客服系统。因此这里需要在自己的页面中嵌入三方客服聊天的页面（这里对接了智齿）。ps：别问我为什么不自己写一个聊天的功能，问就是不知道。 二、iframe是什么 ifram标签规定了一个内联框架，让我们...
统一认证这块，如果两个网址做的是同一个统一认证，那么A站通过iframe的方式嵌入到B站，是否可以免登录呀
m0_57567839的博客
03-02 1462
一般来说，如果两个网站使用同一个统一认证系统，用户在其中一个网站上登录后，另一个网站可以通过一些手段获取到用户的登录状态，以实现免登录的功能。这通常是通过在用户访问另一个网站时，在请求头或者 URL 参数中携带认证信息的方式实现的。 但是，将一个网站通过 iframe 的方式嵌入到另一个网站中，实现免登录需要满足以下几个条件： 两个网站使用的统一认证系统必须支持 iframe 嵌入，并允许通过 iframe 进行认证操作。 用户在访问 A 站时必须已经进行过登录操作，并且认证信息已经保存在用户的浏览器中
vue项目中使用iframe嵌套外部链接页面的实现与应用
qq_32755875的博客
01-06 2万+
一. 应用需求 在vue开发项目的过程中，需要在自己的页面框架中，引用别人做的页面功能，但又不想直接跳转，失去整个系统的统一性，只想在这个子页面（子路由里跳转），那么如何实现呢？ 很简单！iframe就可以帮我们完成! 本文将以嵌入哔哩哔哩为例 二、实现过程 1、侧边栏的实现 以下代码都是在sideMenu.vue侧边栏组件中实现 1.1 template页面显示部分——为侧边栏绑定单击事件 <template> <div> <Menu :active-name="
iframe嵌入页面实现免登录思路（以vue为例）
最新发布
weixin_41395339的博客
07-19 108
背景：最近实现一个功能需要使用iframe嵌入其它系统内部的一个页面，但嵌入后出现一个问题，就是一打开这个页面就会自动跳转到登录页，原因是被嵌入系统没有登录(没有token)肯定不让访问内部页面的，本文就是解决这个问题的。选择的技术方案：本地系统使用iframe嵌入某个系统内部页面，那就证明被嵌入系统是安全的可使用的，所以...
html网页防止跳过登录页面,如何让某个域的网站嵌套另一个域的网页，并跳过登录步骤？...
weixin_34121505的博客
06-17 1478
有2个独立的网站，网站A，网站B。网站A想通过iframe嵌套网站B，网站B有登录机制，希望在网站A直接访问网站B，跳过登录步骤，请问网站B改怎么拓展才能支持？当前网站B的后台是用koa搭建的，在路由处通过判断ctx是否有session数据，如果没有则重定向，有则next()；大致实现如此：app.use(async (ctx, next) => {/* 目前需求希望能支持被 xxx.com...
如何在一个系统的页面中嵌入另一个系统的页面并实现免登录
诺浅的专栏
11-22 3420
有两个系统A、B，希望在A系统中嵌入B系统的页面，我们是具备B系统的账号密码的，期望是能在嵌入的B系统不用重新登录。比起SSO等步骤，本文提供了一种相对简单的实现方式，实现步骤如下iframe。
在A系统中自动登录B系统，通过内嵌iframe进行B系统的免密自动登录进行实现
xcdsdf14545的博客
07-02 6594
下面的为A系统登录后跳转的首个页面,在A系统的页面中内嵌iframe，对B系统进行免密自动登录 !<!DOCTYPE html> <html> <head> <title></title> </head> <body> <iframe src="http://localhost:9090/jeeplus_war/a/unifiedAuthentication/zzz?cid=admin"><...
iframe—网页中嵌入其他网页
aikker的专栏
11-25 2万+
iframe 是一个可以把另外一个网页嵌入到一个网页里的代码，非常有用。对于一个内容不错的网页，要方便地把它搬到自己的博客里，用这个代码最合适。而对于在新浪博 客里不支持的一些网页效果和代码，可先把他们设置好，在支持他们的网站上使用，或上传到一个免费的网络空间或网络硬盘里，获取相应的网页地址，然后用 iframe嵌入到新浪博客里，非常好用！<br /> <br />一、固定位置的iframe代码：<br /> <br /><DIV align=center><IFRAME src="http://w
iframe嵌套vue页面
05-09
iframe是一个HTML标签，用于在网页中嵌入另一个HTML页面。Vue是一个用于构建Web用户界面的JavaScript框架。当我们需要将Vue页面嵌套在iframe中时，需要注意以下几点。 首先，因为Vue是单页应用程序(SPA)，所以它的路由是基于浏览器的history API。在iframe中，浏览器的历史记录是独立的，因此需要在Vue路由中使用base选项。 其次，由于iframe中的内容是异步加载的，所以需要使用Vue的异步组件来确保Vue组件在iframe中渲染之前加载。对于异步组件，Vue提供了两种方式：通过工厂函数返回组件或使用动态import（ES2015特性）。 最后，与普通的Vue应用程序不同，iframe中的Vue应用程序需要与宿主页面进行通信。通过postMessage() API，可以通过消息传递进行跨域通信。需要在Vue应用程序中监听消息，处理来自宿主页面的消息。同时，在宿主页面中，需要订阅来自iframe中Vue应用程序发送的消息。 总之，将Vue页面嵌套在iframe中需要注意Vue路由中的base选项、使用异步组件和处理宿主页面与iframe中Vue应用程序之间的跨域通信。这样才能确保Vue应用程序在iframe中正常渲染并与宿主页面进行通信。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值