vue中iframe引入html文件

最新推荐文章于 2024-06-14 13:50:53 发布
最新推荐文章于 2024-06-14 13:50:53 发布
阅读量2k 收藏
点赞数 2
文章标签： Vue iframe HTML public文件夹 嵌入内容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43323913/article/details/123880522
版权 
// .vue文件中引入html文件、autoMove.html文件放在vue项目public文件夹下
<template>
  <div class="home">
    <iframe
      class="iframe_box"
      src="/autoMove.html"
      frameborder="0"
      scrolling="no"
    ></iframe>
  </div>
</template>
Intermediate：HTML 中的 iframe
新华编程特战队
02-13 2105
它通常用于广告、视频、分析和交互式内容，它创建了一个矩形区域，用于嵌入网页和父文档之间的无缝交互，由 JavaScript 促进。中的目标，方法是为其指定一个名称，例如iframe_a，然后再次使用该名称作为目标，如下面的示例所示。iframe 应被视为您内容的组成部分，而不是您网站的一部分。对于属性值，默认使用像素，但也可以使用百分比值，例如“链接的 target 属性必须引用 iframe 的 name 属性。这可能会降低您的网站速度，并使您的网站面临恶意软件的风险，尤其是当内容来自。
在 Vue3 中使用 ＜iframe＞，常见场景、问题及其解决方案
最新发布
繁若华尘的博客
02-25 1695
对于复杂场景（如微前端），可考虑更专业的方案（如 qiankun 或 Web Components），但 iframe 仍是最简单的隔离方案。
Vue文件通过iframe标签引进外部html文件
qq_17175045的博客
05-12 660
Vue文件通过iframe标签引进外部html文件
iframe引入html文件js报错,vue使用iframe嵌入html，js方法互调
weixin_42368226的博客
06-16 1338
前段时间 使用h5搞了个用cesium.js做的地图服务功能，后来想整合到vue项目，当然最简单的就是iframe直接拿来用了。但html和vue的方法交互就是成了问题，vue调用html种方法还好，尤其是html调用vue中的方法当初就没有解决，忙着项目上线直接搞了个setInterval不停轮询，哎不说他了；现在空点了来把问题解决了，俗话说得好闲时学来忙时用，闲时不学忙时莫得用，所以各位走过路...
vue添加html片段,VSCode--HTML代码片段（基础版，react、vue、jquery）
weixin_31200621的博客
06-26 2147
起因是最近在学习前端，看的网上的demo也是在react、vue、jquery之间穿插，为了方便一键生成html模板(懒)写demo，有了以下折腾。本人使用的前端编辑工具是vscode(方便、懒)，可配置成中文界面，很友好，丰富的第三方插件，真香。以下是基于vscode设置的html代码片段：1. 文件->首选项->用户代码片段2. 输入html，打开第一个html.json文件3.编...
vue中如何通过iframe方式加载本地的vue页面
小漠007的专栏
05-31 3077
这个需求一般很少能遇到，只要说去了iframe，很多人就会唾弃。但是有时候的确无法避免使用它，当iframe的特性带来的优势远远高于自己用div模拟的时候。
vue页面中嵌入html页面跨域,vue内嵌iframe并跨域通信
weixin_32142107的博客
06-03 2525
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.js中引入echarts数据大屏html [静态非数据传递!] ）
Start_Simple的博客
04-01 2835
vue3原有public文件夹下 我这边是新建一个static文件夹 专门存放要用到的html文件 复制拖拽过来。这里是静态展示 动态数据效果还需html页面加一个监听message的事件这篇文件不赘述。方法 不同于vue的 components: { } 命名方式。再修改宽高即可满足首页(vue页)呈现引入的html。在项目原有vue（例如首页）基础上引入html页面。index为html的首页。vue调用vue页面方式。
vue+iframe引入本地其他项目 404
qq_42264793的博客
10-22 2371
vue+iframe引入本地其他项目 404 进入vue.config.js 把代理配上，再检查检查，域名，端口号是否正确。 // An block proxy:{ "/path":{ target:"http://***:8080" ws:true, changeOrigin:true, pathRewite:{ '^path':'' } } } e,g // An block module.exports = { devServer: { proxy: {
vue项目中使用iframe引入html内嵌页面
栀妹儿的炼丹炉
03-11 1822
一句<iframe class="iframe" src="http://..." frameborder="0" />即可 实例：eladmin中引入嵌入在框架页面中的页面 1、新增菜单：组件路径是src/views下的文件路径（官网说的） 2、在代码中按照新增组件路径写文件：一个energy文件夹，一个index.vue文件 3、index.vue内容 <template> <div> <iframe class="iframe" src="ht
VUE页面中加载外部HTML的示例代码
08-29
同时，在加载外部HTML文件时，需要处理外部HTML文件中的相对路径问题，可以使用绝对路径来解决该问题。 知识点： 1. VUE中的v-html指令用于加载外部HTML文件的内容。 2. 使用axios进行GET请求来获取外部HTML文件的...
Vue中插入HTML代码的方法
12-03
我们需要吧<p>Hello World</p>插入到<p>My name is Pjee</p>应该如何做？ 一、使用v-html v-html:更新元素的 innerHTML const text = `<p>Hello World</>` <p> My name is Pjee <p v-html='text'></p> </p> 注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。 二、渲染函数 渲染函数：这是通过对VNode（虚拟DOM）的操作来生成 text()
vue里面使用iframe标签，引入一个.html文件，将其设置为页面的动态背景，但是页面一直显示404
m0_64053511的博客
06-02 3704
把要引入的文件dian.html放在了public的js下面,在iframe标签的src里面引入该文件，但是页面上是一直显示404（dian.html里面是飘来飘去的点点）。1.这是没有引入iframe标签的情况2.这是引入iframe标签的情况3.原代码 4. 引入的文件位置1.原因：在vue里面打包好的项目就以public为根目录的,所以src直接引用即可，不能再加public。2.修改后的代码（其余代码不变） 3.最后页面
Vue3项目中引入html页面
我的博客
03-31 744
"引入的html文件"
vue组件内部应用外部的html片段
taowuhua的博客
07-30 2165
在vue组件内部应用外部的html片段，是一个很常见的用法，那么有哪些方法可以实现呢？ 根据情况使用不同的方法。 iframe 如果是一个完整的外部页面（有完整的html，head,body），可以考虑用iframe。 <iframe src="test.html"></iframe> ...
Vue中嵌入原生HTML页面
weixin_38982591的博客
01-30 4482
但是vue目前暂时没找到有类似功能相关文档，所以我采用iframe嵌套的方式。在mounted生命周期中去绑定具体Iframe的页面。在mounted中加监听事件，并配上处理监听对象的方法。在data中定义一个iframe绑定的页面的对象。在method中定义方法，用于处理监听的事件。在html中接收vue端传过来的值。发送信息到iframe页面。html页面中的代码。
Vue使用iframe嵌入外部HTML文件
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
01-18 7129
背景   项目开发的过程中，我们不可避免的会引入外部已经写好的HTML文件，那在不同的Vue脚手架中如何成功引入HTML文件呢？如何获取到HTML文件中的值呢？ 不同脚手架的不同引入方式   脚手架2   把要引入的文件（假设是aaa.html文件）放到static目录下，在Vue界面中引入： <iframe src="./static/aaa.html"></iframe&gt...
vue 项目中引入 本地html文件
一只小孙鼠的博客
06-14 2431
vue 项目中引入 本地html文件
vue引入iframe配置html
01-24
### 在 Vue 中引入和配置 iframe 加载 HTML 文件或字符串 #### 使用 `<iframe>` 标签加载外部 HTML 文件 可以直接在模板中使用标准的 `<iframe>` 标签来加载来自不同源的静态HTML文档： ```html <template> <div class="container"> <!-- 直接指定src属性 --> <iframe :src="externalUrl" frameborder="0"></iframe> </div> </template> <script> export default { data() { return { externalUrl: 'https://example.com/document.html' } } } </script> ``` 这种方式适用于加载完全托管于另一台服务器上的独立网页资源。 #### 动态设置 `iframe` 的内容 当需要动态改变 `iframe` 显示的内容时，可以通过JavaScript操作DOM节点实现。不过更推荐的做法是在父组件里维护一个URL状态变量并通过`:src`绑定它[^1]。 对于某些场景下希望直接注入一段HTML字符串作为子页面，则可以考虑间接手段——先创建Blob对象再转换成可被浏览器识别的数据URI形式赋给`iframe.src`: ```javascript methods:{ loadHtmlContent(htmlString){ const blob = new Blob([htmlString], { type: "text/html"}); this.frameSrc = URL.createObjectURL(blob); } }, mounted(){ axios.get('/api/getHtml').then(response => { this.loadHtmlContent(response.data); }); } ``` 需要注意的是这种方法可能触发CORS跨域资源共享策略限制以及潜在的安全风险如XSS攻击等问题，在实际开发过程中应当谨慎评估利弊得失并采取适当措施加以防范[^2]。 #### 注册全局组件处理复杂逻辑 针对较为复杂的业务需求比如频繁更新展示内容或者附加交互功能等情形，建议封装专门用于呈现富文本/HTML片段的自定义组件。下面是一个简单的例子展示了怎样构建这样一个名为`v-html-panel`的插件化模块: ```vue // HtmlPanel.vue <template> <section v-if="contentLoaded" ref="panelContainer"></section> </template> <script> import marked from 'marked'; export default { name:'v-html-panel', props:['source'], mounted(){ fetch(this.source).then(res=>res.text()).then(text=>{ this.$refs.panelContainer.innerHTML=marked.parse(text); // 假设输入为Markdown格式 this.contentLoaded=true; }).catch(console.error); }, data(){return{contentLoaded:false}} }; </script> ``` 此方法不仅能够有效隔离视图层代码提高复用率，而且便于后期扩展维护。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

只管挖坑不管埋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值