iframe使里面页面内容缩放

最新推荐文章于 2024-06-20 14:47:31 发布
最新推荐文章于 2024-06-20 14:47:31 发布
阅读量2.4k 收藏 2
点赞数 4
分类专栏： html+css vue 文章标签： html5 css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39321304/article/details/134240560
版权
文章介绍了如何使用HTML和CSS，特别是CSS的`frameCode`和`frameDom`类，以及`transform`属性，配合iframe来实现WeComApp的QR码扫描功能，并确保在不同屏幕尺寸下内容能适当缩放且滚动被禁止。
摘要由CSDN通过智能技术生成

在这里插入图片描述

.frameCode {
  overflow: hidden;
  height: 400px;
 }
 #frameDom{
    overflow: hidden;
    text-align: center;
    width: 400px;
    height: 140%;
    margin-top: -40px;
    margin-left: -10px;
    transform: scale(0.8);
  }
  //transform样式是等比缩放,下面内容显示不全就给高度定高点,左右两边给宽度定多点

<div v-else class="frameCode">
       <iframe
         frameborder="0" 
         scrolling="no"
         id="frameDom"
         :src="`/scg/eagle-appfuse/api/wecomApp/newScanQr?entId=10000`"
       ></iframe>
 </div>
  <!--scrolling 属性是禁止里面内容滑动-->
     ```
程序之主
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
iframe缩放大小
09-13
iframe缩放大小
Iframe左侧页面缩放
04-16
此页面分为两个Iframe，左侧一般用于二级菜单或者树形界面，可以通过点击Iframe之间分割线的图标进行左侧菜单的缩放
前端iframe引入一个超大页面，实现自动缩放
g5703129的博客
05-20 5885
遇到的一个问题，用了很久研究出来了。 前端iframe引入一个超大页面，实现自动缩放 废话不多说，上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>11</title> <style type="text/css"&...
vue使用iFrame嵌入网页，网页等比缩放，全部展示
最新发布
wfyh1314的博客
06-20 701
vue项目使用iframe嵌入网页，让网页在指定div内全部展示.
iframe 等比例缩放显示
q515656712的博客
08-16 2755
代码】iframe 等比例缩放显示。
iframe内嵌网页自适应缩放 以展示源网页的比例尺寸
m0_65607651的博客
05-30 884
iframe内嵌网页自适应缩放 以展示源网页的比例尺寸
iframe内部页面缩放
qq_43862878的博客
11-03 2938
iframe内部页面缩放
iframe根据内容自动等比例缩小
Eight_zhu的博客
11-21 6632
在h5网页中，嵌套第三方页面，使用iframe，然后根据第三方内容，等比例缩小，填充iframe。主要解决h5iOSapp,在线查看文件的问题。思路：将iframe宽高设置200%，然后缩小0.5 #iframeA { position: absolute; transform: scale(.5, .5) translate(-50%, -50%); ...
iframe缩小引用网页比例代码
01-04
HTML使用iframe标签引用外部网页时，可以设置外部网页的显示比例适配当前iframe的大小，兼容各种浏览器哦
前端实现iframe响应式布局，让网页等比例缩放
qq_42822054的博客
07-29 8259
在项目开发中，有一种业务场景，很让人头疼，如何实现iframe响应式布局？ 简单说， 就是有这样一个需求，在一个小的页面下嵌套另一个网页，并且让所嵌套的网页以缩小的形式呈现，这种情况下应该怎么实现？ 初用iframe是下面的效果 <div class="box"> <iframe width="600" heig...
iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题
06-03
Iframe自动根据类容改变自己的大小，解决Iframe设置高度后无法缩小！拜一个高人所赐，特表示感谢！
iframe在移动端的缩放的示例代码
12-14
工作中碰到个奇怪的问题，折腾了大半天，终于算是解决了，这里把分析思路和解决办法记录下。 项目是做响应式的公司官网，前期的静态图页面切完后就提交给后台作为模板使用了，我也就基本退出项目。 在后端落地时发现在在移动端页面显示不太对劲，显得很模糊。第一想法是meta的头部被覆盖了，查看源代码果然发现是被覆盖了。 这是我习惯用的meta头部，使页面宽度根据设备宽度自适应变化 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-sca
js调用iframe实现打印页面内容的方法
10-26
JavaScript（简称JS）提供了多种方式来实现网页内容的打印，包括打印整个页面或页面上的特定区域。本知识点主要介绍如何使用JS调用iframe元素来实现页面内容的打印功能。 ### 知识点一：使用iframe实现区域打印 ...
跨域修改iframe页面内容详解
12-13
主站点内嵌代理页面, 并向代理页传递数据, 代理页根据主站点的数据对目标页的DOM进行操作.由于代理页与目标页同域, 所以代理页可以获取并操作目标页的document对象. 前提条件 需要将proxy.html放到与内嵌的iframe页...
iframe嵌入网页时，页面大小怎么自适应
热门推荐
五花漏的博客
02-24 3万+
问题描述： 页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果： 可以看到嵌入的页面只露出了一部分。 而我们希望：嵌入的页面能够完全展示在容器中。 思路：利用CSS的 transform，进行页面缩放。 1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。 2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧
iframe放大显示_我怎样才能缩放IFRAME的内容？
weixin_34803929的博客
01-14 1716
经过几个小时的努力使它在IE8、9和10中工作，下面是对我有效的方法。自2014年7月1日起，FF 26、Chrome 32、Opera 18和IE9-11中的压缩CSS工作：.wrap{width:320px;height:192px;padding:0;overflow:hidden;}.frame{width:1280px;height:786px;border:0;-ms-t...
Js+Css 控制iframe内容自动缩放
Admans的专栏
05-19 9846
竖屏横屏效果&lt;div class="h5box"&gt; &lt;iframe src="http://www.sina.com" frameborder="0" width="1280px" height="720px"&gt;&lt;/iframe&gt; &lt;/div&gt;
iframe内容自适应缩放、
09-05
使用iframe标签嵌入网页时，通常需要进行内容自适应缩放以适应不同屏幕尺寸或设备。下面是一种简单的方法来实现这个功能。 首先，在iframe标签中添加一个属性：sandbox="allow-scripts allow-same-origin"。这将确保框架内容可以执行脚本，并允许与嵌入网页来自相同原源的链接进行交互。 然后，在所嵌入的网页的头部，加入一个用于缩放的JavaScript脚本。这段脚本会根据窗口大小动态调整iframe的尺寸，以确保内容适应屏幕。 ```html <script> function resizeIframe() { var iframe = document.getElementById('myFrame'); // 这里的'myFrame'需要替换成你自己的iframe的id var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // 获取窗口宽度 var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 获取窗口高度 var iframeWidth = windowWidth; // iframe宽度等于窗口宽度 var iframeHeight = windowHeight; // iframe高度等于窗口高度 iframe.style.width = iframeWidth + 'px'; // 设置iframe宽度 iframe.style.height = iframeHeight + 'px'; // 设置iframe高度 } window.onload = resizeIframe; // 页面加载时调用一次 window.onresize = resizeIframe; // 窗口大小改变时调用 </script> ``` 最后，需要确保iframe的宽度和高度设置为100%，以使其填充父容器。 ```html <iframe id="myFrame" src="your_url" style="width: 100%; height: 100%;"></iframe> ``` 通过以上的步骤，就可以实现iframe内容的自适应缩放。无论窗口大小如何变化，内容都将以合适的比例进行缩放，以适应不同设备的屏幕。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值