vue在页面嵌入别的页面或者是视频

以下是嵌入页面

<iframe name="myiframe" id="myrame" src="http://xxx.com/" frameborder="0" align="left" width="100%" height="100%"  scrolling="auto" marginWidth=0 marginHeight=0 class="iframesty" onload="changeFrameHeight()">
<p class="tip">你的浏览器不支持iframe标签</p>
</iframe>
scrolling="auto"=》可以滚动
scrolling="no"=》不可以滚动
onload="changeFrameHeight()=》根据适配的font-size大小改变初始化时候的高度
在index.html页面写js
window.addEventListener("orientationchange", resetrem);
window.addEventListener("resize",resetrem);
function resetrem(){
var fs = parseInt(document.querySelector("html").style.fontSize)
return fs
}
function changeFrameHeight(){
var fs = resetrem()
var ifm = document.getElementById('myrame');
ifm.height = document.documentElement.clientHeight - fs-6
}

嵌入视频

<div class="toast" :class="{tshow:toastshow}" style="width:90%;height:300px">
<iframe frameborder="0" :src="this.video_url" allowFullScreen="true" style="width:100%;height:300px" ></iframe>
</div>
<div :class="{mask:maskshow}" @click="hidden_video" @touchmove.prevent></div>
												

vue在页面嵌入别的页面或者是视频2的更多相关文章

  1. 通过Iframe在A网站页面内嵌入空白页面的方式,跨域获取B网站的数据返回给A网站!

    以下代码只是为演示该方法具体是如何操作的,实际的意义并不大. 其实这个方法还可以解决很多方面的跨域操作,以下两点为我工作中遇到的情况! 比如A系统中打开B系统页面的时候,获取B系统页面高度,A系统中可 ...

  2. session失效后,登录页面嵌入iframe框架

    在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...

  3. HTML页面嵌入视频和JS控制切换视频的问题

    文章摘自:http://www.cnblogs.com/jorton/archive/2012/03/19/vidio_in_site.html 首先,在页面中嵌入视频的HTML代码为: 1 < ...

  4. WebIM(5)----将WebIM嵌入到页面中

    在之前的文章中,已经开发了一个简单的WebIM,但是这个WebIM是在独立的页面中的,今天发布的WebIM是一个可以嵌入到自己网页中的版本,你只需添加少量的代码,就可以在页面中嵌入一个WebIM.不过 ...

  5. 基于VUE选择上传图片并在页面显示(图片可删除)

    demo例子: 依赖文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template> ...

  6. 第三方页面嵌入到web项目的方案 之 使用iframe嵌入

    有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...

  7. iPhone的App嵌入html页面问题

    测试环境:iPhone ios 11.0.3 问题:iPhone App嵌入HTML页面,页面拉动到底部时,手势从屏幕底部边缘开始往上拉动,页面出现白色图层,且html页面一屏外的会卡住,无法滚动,需 ...

  8. 转:vue项目如何刷新当前页面

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://loca ...

  9. react native (2) 嵌入h5页面 设置顶部导航

    嵌入h5页面 1.新建好页面 2. import { WebView } from 'react-native'; 3.<WebView source={{ uri: '要引入的页面路径' }} ...

随机推荐

  1. 【中间件安全】Apache 安全加固规范

    1. 适用情况 适用于使用Apahce进行部署的Web网站. 2. 技能要求 熟悉Apache配置文件,能够利用Apache进行建站,并能针对站点使用Apache进行安全加固. 3. 前置条件 1. ...

  2. 【代码审计】XYHCMS V3.5任意文件下载漏洞分析

      0x00 环境准备 XYHCMS官网:http://www.xyhcms.com/ 网站源码版本:XYHCMS V3.5(2017-12-04 更新) 程序源码下载:http://www.xyhc ...

  3. osg::Image::AllocationMode

    enum osg::Image::AllocationMode{ NO_DELETE, USE_NEW_DELETE, USE_MALLOC_FREE };

  4. [原]openstack-kilo--issue(十三)Unauthorized: The request you have made requires authentication. (HTTP 401) (Request

    在运行nova-list 的时候发现报错401:如下面 ========>>>>>>>>> 正常显示 [root@controller ~]# n ...

  5. 10.22crm

    2018-10-23 08:28:41 由于昨晚上断网,所以今天早上补更一下 越努力,越幸运!永远不要高估自己! crm老师就讲三四天,还有明后两天! 主要是讲一些基本使用,自定义配置陪一些东西! 主 ...

  6. Nodejs----注册登录

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  7. ELK之使用metricbeat收集系统数据及其他程序并生成可视化图表

    将 Metricbeat 部署到您所有的 Linux.Windows 和 Mac 主机,并将它连接到 Elasticsearch 就大功告成啦:您可以获取系统级的 CPU 使用率.内存.文件系统.磁盘 ...

  8. tsm 带库 磁带

    磁带和存储池设置 新装入带库的磁带,需执行格式化命令方可使用,而存储池采用手工定义方式加入磁带,所以checkin状态设置为private,而不使用scratch磁带自动定义方式. label lib ...

  9. SQL中的between and

    "between xx and  xx "在SQL中的用法 这个大家都很熟悉,但是当问到是否包含两端的值时,就有点儿不确定了.在W3School网站上,有这样的一段话: 参考:ht ...

  10. [No0000FB]C# 命名空间(Namespace)

    命名空间的设计目的是提供一种让一组名称与其他名称分隔开的方式.在一个命名空间中声明的类的名称与另一个命名空间中声明的相同的类的名称不冲突. 定义命名空间 命名空间的定义是以关键字 namespace  ...