记一次vue通过iframe引入外部html显示不全问题

最新推荐文章于 2024-06-20 14:47:31 发布

想成为不脱发的大佬

最新推荐文章于 2024-06-20 14:47:31 发布

阅读量4.6k

点赞数 1

文章标签： vue iframe

本文链接：https://blog.csdn.net/weixin_44905381/article/details/102546851

版权

本文记录了一次在Vue项目中通过iframe加载外部HTML时遇到的显示不全问题。开发者最初遇到直接使用iframe时页面显示不完整的情况。通过在mounted阶段设置iframe的css样式，将iframe宽度设为920px并添加缩放比例，成功解决了问题，发现其实解决方案相当简单。

摘要由CSDN通过智能技术生成

记一次iframe引入html显示不全问题

最近在vue项目中遇到引入外部html页面问题，直接使用了iframe标签显示不全，最后用缩放的思路解决

代码如下：

<div class="iframe-father">
      <iframe :src="pdfUrl" width="920px" id="iframe1" style="transform-origin: 0 0;"></iframe>
    </div

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

想成为不脱发的大佬

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue 3.0使用 iframe 标签引入本地HTML页面，并实现数据交互

hac_kill_you的博客

05-24

9946

最近在做vue的项目时候，需要引入本地html页面，中间遇到了很多问题，费时又费力，因此记录下来，以备不时之需，也给大家提供点资料。

iframe嵌入网页时，页面大小怎么自适应

最新发布

wfyh1314的博客

06-20

1030

vue项目使用iframe嵌入网页，让网页在指定div内全部展示.

iframe中页面显示不全1

08-08

Iframe装载在div中，设置iframe的大小。

iframe不完全显示的解决方法

lujianfeiccie2009的专栏

05-18

3万+

<br /><br />如果在页面中用到了iframe标签，有时在浏览器中并不能完全显示iframe，导致有些iframe内的内容不能被显示，如果遇到这种情况，使用以下js可以解决大多数问题。<br /> <br />这是iframe标签：<iframemarginwidth="0" src=" " marginheight="0" width="100%" name="i" id="urlIframe" frameborder="0" scrolling="no" onload="reinitIframe

html iframe显示不全,滚动的iframe解决，但在iframe页面显示不全

weixin_31064353的博客

06-20

2485

我试图滚动iOS上的iframe，我成功了，它的滚动的好，参考：滚动的iframe解决，但在iframe页面显示不全但是，所有的解决方案都有一个问题：iframe页面没有完全显示...我测试了我的iphone和ipad，iframe页面显示波涛汹涌。有什么想法吗？例子：$(function(){if (/iPhone|iPod|iPad/.test(navigator.userAgent))$(...

一个含有iframe的html页面为什么只显示一部分？

祥子的博客

09-07

1万+

test.html: Document hello world!!! 效果：解决方案：因为iframe标签需要一个关闭标签,即. 在标签内使用/>关闭的前提条件是当前网页使用XHTML标准,当使用HTML标准时/>是不符合语法规则的写法,如果浏览器不能容错,将会产生错误.

html页面用iframe引入公共导航跳转子页面内容不显示或显示不全的问题

Yana5mu的博客

06-04

1584

html页面用iframe引入公共导航跳转子页面内容不显示或显示不全的问题今天写页面有好几个页面要用一样的导航栏，所以就写了公共的head.html页面。但是发现用jQuery的load方法引入的时候总是报跨域问题，jQuery我是cdn引入的。懒得解决跨域和下载jQuery。便用了iframe引入。发现会出现一个问题，那就是导航栏点击跳转子页面他的页面会放在iframe的盒子里。这个问题用一行代码就可以解决，给a标签加一个target属性 target="_parent" 看下我的代码 he

VUE页面中加载外部HTML的示例代码

08-29

本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，主要通过使用VUE的v-html指令来加载外部的HTML文件，并使用axios进行GET请求来获取外部HTML文件的内容。该示例代码中使用了两个组件，分别是HtmlPanel.vue和...

vue+iframe引入本地其他项目 404

qq_42264793的博客

10-22

2242

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的一些问题

weixin_43829905的博客

07-15

943

vue 嵌入iframe的一些问题

vue页面中嵌入html页面跨域,vue内嵌iframe并跨域通信

weixin_32142107的博客

06-03

2153

Vue组件中如何引入iframe？export default {data () {return {src: '你的src'}}}如上，直接通过添加iframe标签，src属性绑定data中的src，第一步引入就完成了vue如何获取iframe对象以及iframe内的window对象？在vue中，dom操作比不上jquery的$(‘#id’)来的方便，但是也有办法，就是通过refexport de...

html iframe内容怎么展示全部,当我iframe里面内容很多的时候，如何让其自动适应全部显示？...

weixin_34221330的博客

06-09

965

导航/*.header1{float: left;}*/html{overflow:hidden;}#header2,#header3,#header4{display: none;}iframe{overflow-y: hidden;height: 850px;}.hidden{display: none;}window.onload=function(){var projectCho=do...

iframe引入的网站不能全屏宽度有滚动条_程序猿进阶不能错过的最全前端性能优化秘籍（一）！...

weixin_28890941的博客

12-01

464

很多人通常在完成了产品之后才会去考虑性能。把与性能相关的事情拖到项目的最后来做，所做的也不过是对服务器上的config文件进行一些微调、串联、优化以及部分特别小的调整。而现在，技术已经有了翻天覆地的变化。一个项目的性能是非常重要的，除了要在技术层面上注意，更要在项目的设计之初就开始考虑，这样才可以使性能的各种隐形需求完美的整合到项目中，随着项目一起推进。在性能方面，前端的优化是大家很容易忽视却又十...

简单实现iframe自适应高度，解决iframe显示不全的问题

weixin_45031736的博客

06-20

5037

在iframe的style进行如下设置οnlοad=this.height=iFrame1.document.body.scrollHeight 例如： <iframe src="XXX.jsp" name="frame1"id="frame1" frameborder="0" width="100%"onload="this.height=frame1.document.body.scrollHeight" scrolling="no"></iframe> 这样iframe

在vue中使用iframe标签引入html静态页面

weixin_44455772的博客

03-11

3564

最近项目要求，需要在vue中使用iframe标签引入html页面，下面记录采坑记录（注意:我这里使用的是vue3.0）首先，我在public目录下新建了一个static的文件夹，然后将html页面放在了public/static目录下，然后在iframe标签的src中写的路径为…/…/public/static/2.html。结果：不显示接着，我在调试窗口看见了Index.html，这是public目录下默认生成的一个html文件也就是如果我们的html页面找不到，他就会默认显示这个，这下

iframe不能完全显示

l1134的博客

11-12

3509

html代码使用 iframe 不能完全显示，代码如下 <div className={styles.knowledgeRouteStyle} style={{ width: '100%', height: '95%', touchAction: ' none', overflowY: 'scroll' }} > <iframe id="iframe_detl" name="iframe_a" fr

vue项目落地(qiankun.js)微前端服务

zhanghaoran

10-23

3973

什么是微前端？网上抄的：微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时，它们也可以在共享组件的同时进行并行开发. 我的理解：微服务就像是一个操作系统：在其中可以运行多个app。但每个app呢，又可以脱离操作系统独立运行。为什么选择qiankun.js | qiankun.js优点大白话：就目前市面上没有比qiankun.js更好用的了。虽基于 single

vue中修改iframe内部样式

08-11

在Vue中修改iframe内部样式，可以通过以下步骤进行操作。首先，你需要在Vue组件中添加一个iframe元素，设置其id和src属性。例如，你可以使用以下代码： ```html <iframe id="iframeId" :src="iframeUrl" width="100%" height="100%" frameborder="0" @load="loadFrame"></iframe> ``` 然后，在Vue组件的methods中定义一个loadFrame方法，用于在iframe加载完成后进行操作。在loadFrame方法中，你可以获取到iframe元素，并操作其内部文档的样式。例如，你可以使用下面的代码： ```javascript methods: { loadFrame() { const iframe = document.getElementById("iframeId"); const body = iframe.contentWindow.document.body; const cssLink = document.createElement("link"); cssLink.href = "/vue项目名称/iframe-css/iframe.css"; cssLink.rel = "stylesheet"; cssLink.type = "text/css"; body.appendChild(cssLink); }, }, ``` 在该方法中，通过getElementById方法获取到iframe元素，然后获取到其内部文档的body元素，并创建一个link标签用于引入样式表。你可以设置link标签的href属性为你要引入的样式表的路径，然后将link标签添加到iframe的body元素中。这样，当iframe加载完成后，样式表就会被应用到其中。123 #### 引用[.reference_title] - *1* *2* [vue项目中修改iframe嵌入的css样式](https://blog.csdn.net/catascdd/article/details/131281843)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *3* [在Vue中引入外部css文件修改iframe嵌入页面的样式](https://blog.csdn.net/bin_322/article/details/122173465)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]