【Egret】里使用iframe标签达到内嵌多个web界面
目的:Egret里使用iframe标签达到内嵌多个web界面,模式相当于主swf调用N个子swf的效果;
目前在做项目过程中,在使用iframe的时候,碰到了一些功能需求,以及解决方法如下:
一、.在index.html里添加iframe标签,
在index.html的<body>标签下,添加iframe标签,包括:路径,宽,高,坐标X,Y,是否出现滚动条,等属性;
想要详细了解其意思的话,请阅读 http://www.w3school.com.cn/tags/tag_iframe.asp
有两种方法:
1.
<style type="text/css">
.wrapper
{ width:1104px; height:570px; margin:100px 30px; overflow:hidden; position:relative; }
.iframe { width:1024px;height:768px; position:absolute; top:10px; left:50px; }
</style>
<div class="wrapper">
<iframe class="iframe" src="http://www.baidu.com" scrolling="no" frameborder="0">
</iframe>
</div>
2.
<iframe id="page1" width=1104 height=570 frameborder=0 scrolling=auto src="resource/assets/Html/Mobile/index.html?v=<?=$ver?>" style="position: absolute; top: 100px; left: 200px;"></iframe>
二、添加标签完成之后,如何让iframe内容跟随主html进行缩放,
方法:
在 style 属性方法里,添加
width:100%;height:100%;
这句代码,就可以达到让iframe内容跟随主html进行缩放的效果;完整的代码如下:
<iframe id="page1" width=1104 height=570 frameborder=0 scrolling=auto src="" style="width:50%;height:50%; position: absolute; top: 0px; left: 0px;"></iframe>
三、解决缩放问题后,如何控制iframe内容刷新,更换不同的链接呢?并且是在egret里进行控制
方法如下:
在 index.html里的<script>标签下,添加 函数,用来根据情况设定 iframe的src(可以考察:http://www.cnblogs.com/fanyf/p/3651523.html)
function setPage(bool)
{
if(bool == false)
{
var bgm = document.getElementById('page1');
var name = "resource/assets/Html/PC/index.html?v=<?=$ver?>";
bgm.src = name;
}else
{
var bgm = document.getElementById('page1');
var name = "resource/assets/Html/Mobile/index.html?v=<?=$ver?>";
bgm.src = name;
}
}
然后在egret代码里对这个函数进行引用,其方法如下:
window["setPage"](true);
到这步,基本功能就完成了;
四、但是有时候想清除iframe的内容,让他为空,隐藏,该怎么做呢?
方法如下:
需要把iframe的src设为空,页面就不会显示了,不过设为空之后,会出现一个404提示,我目前解决方法是添加一句 bgm.visible = false;不过这方法在chrome里能执行,在ie里没有效果
var bgm = document.getElementById('page1');
var name = " ";
bgm.src = name;
bgm.visible = false;
【Egret】里使用iframe标签达到内嵌多个web界面的更多相关文章
- 如何优雅的关闭基于Spring Boot 内嵌 Tomcat 的 Web 应用
背景 最近在搞云化项目的启动脚本,觉得以往kill方式关闭服务项目太粗暴了,这种kill关闭应用的方式会让当前应用将所有处理中的请求丢弃,响应失败.这种形式的响应失败在处理重要业务逻辑中是要极力避免的 ...
- HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版
昨天看到这篇文章[置顶]开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面 就想弄一个winform结合html5的一个小东西,突有兴致,想在里面嵌套一 ...
- iframe动态改变内嵌页面高度
test.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w ...
- HTML-图片热点、网页内嵌、网页拼接、快速切图
图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.与图片链接不同,热点是图片上的某一个区域或多个区域. 我们用魔兽世界图片来做一个图片热点,点击logo.区域和不 ...
- iframe标签flash遮盖页面元素问题——wmode参数
最近做项目过程中,遇到各种小问题,所以打算通过博客园来记录各问题的解决办法. 这篇的问题背景是这样子的:项目是用的AngularJS框架,在某个页面上用了wangEditor富文本编辑器插件(gith ...
- selenium - switch_to.frame()- 内嵌表单的切换
表单嵌套frame/iframe webDriver只能在一个页面上对元素识别和定位,对于frame/iframe表单内嵌页面上的元素无法直接定位,此时就需要通过switch_to.frame()方法 ...
- PluginOK中间件高级版-支持在Chrome、Edge、Firefox等浏览器网页中真正内嵌ActiveX等控件运行的版本已获多家上市公司采购
PluginOK(牛插)中间件(原名:本网通WebRunLocal)是一个实现WEB浏览器(Web Browser)与本地程序(Local Application)之间进行双向调用的低成本.强兼容.安 ...
- iframe框架里镶嵌页面;<marquee>:滚动效果;<mark>做标记;内联、内嵌、外联;选择器
标签:①②③④⑤⑥⑦★ 框架: 一.frameset:(框架集) 1.如果使用框架集,当前页面不能有body 2.cols="300,*":左右拆分,左边宽300,右边宽剩余 3. ...
- django2 用iframe标签完成 网页内嵌播放b站视频功能
前言: 给自己的网站中加入视频资源,有两种方法,一种是用iframe标签引用外站资源,另一种则使用video标签,获取站内资源进行视频播放.其中前者顾名思义,是将视频资源上传到视频网站中,然后通过引用 ...
随机推荐
- android学习10——对顶点着器和片段着色器的理解
图形都是点,线,面组成的.顶点着器指定了顶点的位置,大小和颜色. 看一个顶点着色器的代码 attribute vec4 a_Position; attribute float a_PointSize; ...
- 【转】SQLState详解
根据 X/Open 和 SQL Access Group SQL CAE 规范 (1992) 所进行的定义,SQLERROR 返回 SQLSTATE 值.SQLSTATE 值是包含五个字符的字符串 . ...
- 前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...
- Express4.x动态的销毁或者替换中间件(app.unuse)
需求描述 expres4.x托管静态资源时以中间件的方式将server-static挂载到app上,正常的使用没有问题,但是有时候我们需要动态的托管一些静态资源,也就是静态资源的目录不确定的时候该怎么 ...
- java之重定向与转发
昨天搞了一个问题,关于手机返回按钮的(Android机,ios没有返回键) 在每一步操作都要进过鉴权,如果鉴权不通过就需要跳转到指定jsp页面,再进行link:到app进行登录操作: 然后问题出现了, ...
- C# .NET更智能的数据库操作封装项目
前面两篇文章介绍了框架的思路及里面大概的实现过程,那时候忘记上传项目,就补发一下.顺便介绍下框架使用方式,并分析下框架使用的优缺点. 先发一下前两章的链接 篇一:http://www.cnblogs. ...
- UVa 1588 换抵挡装置
前言 题目 大意是说,两个槽能够插在一起,并保证每一列的高度不高于3,保证最短长度. 思路 思路很简单,取短字符串遍历长字符串的每一个位置,纪录下位置,并取最短即可. 实现 //习题3-11 换抵挡装 ...
- 1088: [SCOI2005]扫雷Mine
1088: [SCOI2005]扫雷Mine Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1635 Solved: 979[Submit][Sta ...
- 自定义 Layout布局 UICollectionViewLayout
from: http://www.tuicool.com/articles/vuyIriN 当我们使用系统自带的UICollectionViewFlowLayout无法实现我们的布局时,我们就可以 ...
- swift -- 静态变量static
import UIKit class ViewController: UIViewController { //静态变量 swift中的static静态变量,只能在这里声明,不能在方法中声明 ...