首页 > 编程语言 >iframe嵌套(等宽高比自适应:aspectRatio)

iframe嵌套(等宽高比自适应:aspectRatio)

时间:2024-03-10 16:23:09浏览次数:28  
标签:适应 嵌套 宽度 iframe 宽高比 aspectRatio

 可以使用iframe引入外部网页

  <iframe
        title="vimeo-player"
        src="https://player.vimeo.com/video/919942180?h=a56246711a"
        width="640"
        height="360"
        style={{ width: '100%', aspectRatio: '16/9' }}
        frameBorder="0"
        allowFullScreen
      />

 

如果你希望 iframe 的宽高比保持固定,可以结合使用 style 属性来实现

<iframe src="https://www.example.com" style="width: 100%; aspect-ratio: 16/9;"></iframe>

iframe 的宽度被设置为父容器的宽度,并且高度会按照16:9的宽高比进行自动调整

标签:适应,嵌套,宽度,iframe,宽高比,aspectRatio
From: https://www.cnblogs.com/Simoon/p/18064314

相关文章

  • Vue给iframe设置嵌套页面的宽高
    Vue给iframe设置嵌套页面的宽高,代码示例如下:<template><iframeid="iframe":height="scrollHeight":width="scrollWidth"frameborder=0allowfullscreen="true"src="/docs-html/xxx.html"ref="iframe&......
  • selenium处理iframe
    -如果定位的标签在iframe中,需要先切换到iframe中-切换到iframe:driver.switch_to.frame('iframe的id属性值')-动作链(拖动):fromselenium.webdriverimportActionChains-实例化一个动作链对象-执行一系列的动作链操作-调用perform()方法执行链中的所......
  • Vue3 配合 Element-Plus 和 iframe-resizer 完美实现抽屉 Drawer 和 iframe
    环境准备pnpminstallvuelodashelement-plusiframe-resizerpnpminstall@types/iframe-resizer-Diframe新建文件src/utils/directives/iframeResize.ts​import{Directive,DirectiveBinding,nextTick}from"vue"importiframeResizefrom"iframe-r......
  • 自适应iframe高度
    使用iframe嵌入页面很方便,但必须在父页面指定iframe的高度。如果iframe页面内容的高度超过了指定高度,会出现滚动条,很难看。如何让iframe自适应自身高度,让整个页面看起来像一个整体?在HTML5之前,有很多使用JavaScript的Hack技巧,代码量大,而且很难通用。随着现代浏览器引入了新的Resi......
  • iframe 使用 postMessage 传递信息,addEventListener监听返回信息,并使用removeEventLis
    BUTTON发送消息selectButton.addEventListener('click',()=>{      iframe.contentWindow.postMessage({        event_id:"select_media",        return_type:'media'      },'*');   ......
  • 十九、Ajax和iFrame
    AjaxAjax向后台发请求1、下载引入jQuery2、语法格式#get$.ajax({Url:‘http://www.*****.com’,Type:‘GET’,Data:{‘k1’:’v1’},Success:function(arg){//arg是字符串类型//varobj=JSON.parse(arg)}})$.ajax({Url:‘http://ww......
  • 【Vue】使用iframe解决多应用整合问题(微前端)
    一、需求背景有老系统需要重构,新做的系统需要做一个大一统的整合,类似一个分类栏目在菜单位置罗列出有什么子系统应用,点击对应的应用菜单,展示区跳转到相应的子系统应用中我用Excel简单描述了下系统的页面效果: 二、技术方案第一种,使用iframe实现,html提供了iframe标签实现页......
  • 调整屏幕的宽高比
    一.前言我们将上一篇文章中写的应用程序再次运行起来,然后将屏幕横过来,我们会发现空气曲棍球的桌子被压扁了。这之所以会发生,是因为我们没有考虑屏幕的宽高比,直接将坐标传递给了OpenGL。在这片文章中,我们会弄清楚为什么桌子被压扁了,以及如何使用投影解决这个问题。 二.宽高......
  • 记录使用chremo extension 扩展中的页面与其中的iframe通信
    对扩展之前并不怎么了解,简单学过一点js,刷小视频的时候突然冒出想法想做一个扩展。一开始做就遇到了麻烦,记录一下-2024.1.28使用的版本是v3找了挺久文档之后获得了解决方法:其实挺简单的,通过拿到iframe的引用,调用下面的postMessage方法对iframe发送消息variframe=document.ge......
  • 四、iframe切换+alert切换+鼠标操作+js操作
    1、iframe切换iframe是什么在网页中内嵌了另一个html怎么识别iframeF12打开开发者工具,在Element面板中鼠标点击要操作的元素会显示元素的完整路径,检查里面是否存在iframe,html切换进iframe当中去driver.switch_to.frame(几种方法去......