vue项目中使用iframe引入html内嵌页面

最新推荐文章于 2024-06-14 14:55:48 发布
最新推荐文章于 2024-06-14 14:55:48 发布
阅读量1.7k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38990605/article/details/114683292
版权
在Vue项目中，通过创建一个名为'energy'的文件夹，并在其中建立'index.vue'文件，可以实现iframe引入html内嵌页面。在菜单中设置组件路径为'src/views/energy/index.vue'，并在index.vue中编写相关代码，从而在eladmin框架页面中展示html内容。
摘要由CSDN通过智能技术生成

一句<iframe class="iframe" src="http://..." frameborder="0" />即可

实例：eladmin中引入嵌入在框架页面中的页面

1、新增菜单：组件路径是src/views下的文件路径（官网说的）
在这里插入图片描述
2、在代码中按照新增组件路径写文件：一个energy文件夹，一个index.vue文件
在这里插入图片描述
3、index.vue内容

<template>
  <div>
最低0.47元/天 解锁文章
栀妹儿
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iframe嵌套页面
weixin_55753367的博客
06-20 9133
HTML里有着这么一个标签 ifarme 。我们把它称做为内联框架标签。刚开始学习搭建页面的时候基本用不上，到现在自己学习做项目后才明白了这个标签的重要性。当看到标签中的 src 属性，就告诉我们可以在我们自己的网站页面加载其它的网站或者本站的其它页面内容，也就是嵌套页面。 在W3School里详细介绍： 1.支持iframe的浏览器 IE、Firefox、Chrome、Safari、Opera， 在不支持iframe的浏览器里是看不到嵌套效果的。 2.iframe的定义和用法 iframe元素会创建包含
iframe 嵌入html页面,iframe 完美嵌入网页
weixin_30151653的博客
06-03 2828
控制边框等，直接上代码function showS(){document.getElementById("test").scrolling="yes";document.getElementById("test").style.overflow="scroll";//alert(document.getElementById("test").scrolling);}function hideS()...
vue项目通过＜iframe＞嵌套静态html项目，并实现数据交互
最新发布
st646889325的博客
06-14 452
记录一下新项目集成老项目过程中产生的问题，需要vue项目实现引用HTML，并且实现vue页面可以传递数据到HTML页面，HTML页面也可以反向传递数据给vue页面。1、父页面（vue）传给子页面（html）2、子页面（html）传给父页面（vue）
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
明天也要努力的博客
06-18 1万+
在 public 文件夹下新建 static 文件夹，然后将 html 文件及相关引用拷贝到 static 文件夹下。 2. 相互通信 vue 文件完整代码 html 文件完整代码 定义和用法： postMessage() 方法用于安全地实现跨源通信。语法： 参数 说明 otherWindow 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。 message
html页面 内嵌iframe
qq_34160973的博客
09-03 1444
1.创建iframe &lt;iframe width="100%" frameborder=no id="container"                                     scrolling="no" onload="resizeIframe(this)"&gt; &lt;/iframe&gt; 2. js将html文件字符串，write进html  $(fu
html 内嵌iframe,html页面 内嵌iframe
weixin_26849971的博客
06-05 1273
1.创建iframescrolling="no" οnlοad="resizeIframe(this)"> 2. js将html文件字符串，write进html$(function(){var iframe= document.getElementById('container')；var container = iframe.contentWindow.document;container...
vue页面中嵌入html页面跨域,vue内嵌iframe并跨域通信
weixin_32142107的博客
06-03 2129
Vue组件中如何引入iframe？export default {data () {return {src: '你的src'}}}如上，直接通过添加iframe标签，src属性绑定data中的src，第一步引入就完成了vue如何获取iframe对象以及iframe内的window对象？在vue中，dom操作比不上jquery的$(‘#id’)来的方便，但是也有办法，就是通过refexport de...
vue项目引入iframe
weixin_38879321的博客
03-14 2195
项目引入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
JS修改iframe页面背景颜色的方法
12-03
本文将详细介绍如何使用JavaScript（JS）来修改`iframe`页面的背景颜色。 首先，`iframe`是HTML的一个元素，它允许我们在一个页面中嵌入另一个HTML文档。`iframe`的基本结构如下： ```html <iframe id="myframe" ...
h5 iframe嵌套页面_HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法...
weixin_42499379的博客
01-12 1456
就想弄一个winform结合html5的一个小东西，突有兴致，想在里面嵌套一个微信网页版。好了，想法一出来，就行动吧，最终效果如下图：一开始就打算在页面里面嵌套一个iframe指向https://wx.qq.com就OK了，但是我还是太天真，微信网页版会自动跳转。结果如下图：于是上网搜了一下阻止iframe跳转的办法，就是在iframe标签加上security="restricted"sandbo...
iframe嵌入网页的一部分
05-27
iframe嵌入网页的一部分, 拿别人网页为你所用
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/&hellip; <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的知识，
利用iframe嵌入html页面 （实用, 赞）
chelen_jak的专栏
01-14 1万+
效果图： index.html (主页面） <!DOCTYPE HTML> <style> body { margin: 0; padding: 0; } .iframe-box{ box-sizing: border-box; padding: 0 10px; ...
html中嵌套iframe页面
热门推荐
Ellie
05-14 7万+
有时候需要把其他地方的页面嵌套到当前的的网站的某个模块中，就可以使用iframe嵌套 1、不需要登录其他网站的直接嵌套 新建html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度&lt;/title&a
iframe标签中写html代码,Iframe嵌套HTML网页的用法?
weixin_34382015的博客
05-30 1856
iframe嵌入网页的用法iframe并不是很常用的，在标准的网页中非常少用。但是有朋友经常问到，下面我简单地介绍一下它的用法，你只要熟练掌握这些参数足矣。也应该是框架的一种形式，它与不同的是，iframe可以嵌在网页中的任意部分。我们举第一个例子，具体代码如：，这里的URL可以是相对路径，也可以是绝对路径，效果如：如何将一个html页面中嵌入另一个html页面将一个html页面中嵌入另...
html页面调用iframe嵌入页面中的方法
qq_40126996的博客
09-10 6135
首先创建一个html页面，在其中通过iframe标签插入一个嵌入页面，通过src嵌入 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, mi...
vue使用iframe嵌入html
weixin_43928792的博客
02-23 3383
1.本地html文件的存放 在根目录下找到public文件夹，在public文件夹下创建static文件夹，把html文件放入static文件夹中 2.使用iframe标签引入html文件 <template> <iframe src="/static/test.html" :style="{width: width, height:height}" frameborder="0" ></iframe> </template> <script
【HTML基础-3】iframe框架详解及应用案例—实现页面嵌套
m0_64378913的博客
03-26 1万+
目录1 iframe框架概述2 iframe常用属性2.1 name属性2.2 src属性2.3 width属性2.4 height属性2.5 frameboder属性2.6 其他3 应用案例4 归纳参考文章 1 iframe框架概述 作用：< iframe > 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。即在一个页面中引入另一个页面，实现页面之间的嵌套。可以把需要的文本放置在 < iframe > 和 < /iframe
vue中iframe引入其他导航页面
04-04
在Vue中使用iframe引入其他导航页面，可以使用以下步骤： 1. 在Vue组件中添加一个iframe标签，并设置src属性为要引入的导航页面的URL。 ```html <template> <div> <iframe :src="iframeSrc"></iframe> </div> </template> <script> export default { data() { return { iframeSrc: 'http://example.com' } } } </script> ``` 2. 可以通过Vue的数据绑定来动态设置iframe的src属性，以便在不同的场景下引入不同的导航页面。 ```html <template> <div> <input v-model="iframeSrc" type="text"> <iframe :src="iframeSrc"></iframe> </div> </template> <script> export default { data() { return { iframeSrc: '' } } } </script> ``` 3. 如果要在Vue应用中嵌入另一个Vue应用的导航页面，可以使用Vue的路由机制，将导航页面作为一个子路由来引入。 ```javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ routes: [ { path: '/dashboard', component: Dashboard, children: [ { path: 'nav', component: Nav } ] } ] }) ``` 在这个例子中，Nav组件就是要引入的导航页面，它被作为Dashboard组件的子路由来引入。通过这种方式，可以更好地管理和控制导航页面的访问和权限。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值