Flash对象插入到网页中的3px问题
我记得我已经遇到过,不过今天又遇到了,而且浪费了大量的时候在上面,甚至怀疑自己写的脚本有问题,花了几乎一个下午来调试这个问题。最后发现是样式导致的…
公司里有很多网页游戏,之前是项目多,抄来抄去,JS代码有的是我写的,有的是其它同事直接从网上下载下来copy进去的,到处都是JQuery的$,我不太愿意看到一个页面为了获取DOM对象(getElementById)以及绑定事件来引用额外的脚本,同时也为了统一。网页游戏大多数都是全屏显示,浏览器可视区域有多大,它就全屏显示在里面,为了避免混乱,写了一个通用的脚本支持用户在缩放浏览器时,当可视区域小于指定的宽、高时出现滚动条(Chrome与IE表现一致)。
但当我拿到浏览器可视的宽、高时,对swf对象设定width、height时,神奇的滚动条就出现了,这不符合预期,抓狂…
然后排查问题,对界面所有的元素、样式都删除掉,然后再进行测试,还是有问题。而当我把获得到的可视区域的宽高均减去4px时就不会有滚动条了!!!但界面明显感觉就不对称了,后来找到问题了。
在网上找到二种解决方法:
1、设置swf对象的display属性,将其设置为block;
2、设置body的字体、行高为0,font-size:0;line-height:0;
第二种方法如果页面有文本节点就需要额外再设定字体及行高了,有点麻烦(不过页游界面一般比较简单,一般不太会有什么文字)
默认swf对象返回的display属性为空
最后附上相关的脚本代码,供有需要的同学参考:
/**
* Author zhangyi@bojoy.net
* Version V1.0
*/ var BOJOY_Resize = function() {
var inner;
var _eventList = []; function bindReady(handler) {
var isReady = false; function ready() {
if (isReady) return;
isReady = true;
handler();
} if (document.addEventListener) {//native event
document.addEventListener("DOMContentLoaded", function() {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
ready();
}, false);
} else if (document.attachEvent) {//IE
//iframe
document.attachEvent("onreadystatechange", function () {
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
ready();
}
}); if (document.documentElement.doScroll && typeof window.frameElement === "undefined") {
(function () {
if (isReady) return;
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch (error) {
setTimeout(arguments.callee, 0);
return;
}
// and execute any waiting functions
ready();
})();
}
} // Old browsers
if (window.addEventListener) {
window.addEventListener('load', ready, false);
} else if (window.attachEvent) {
window.attachEvent('onload', ready);
} else {
var fn = window.onload // very old browser, copy old onload
window.onload = function() { // replace by new onload and call the old one
fn && fn()
ready()
}
}
} bindReady(function() {
while (_eventList.length) {
var fn = _eventList.shift();
fn && fn();
}
}); function bindEvent(elem, type, fn) {
type = type.replace(/^on/, ''); if (elem.addEventListener) {
elem.addEventListener(type, fn, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, fn);
}
} function unBindEvent(elem, type, fn) {
type = type.replace(/^on/, ''); if (elem.removeEventListener) {
elem.removeEventListener(type, fn, false);
} else if (elem.detachEvent) {
elem.detachEvent('on' + type, fn);
}
} function getElem(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
} return inner = {
domReady : function(fn) {
_eventList.push(fn);
},
getEl : getElem,
bind : function(id, type, fn) {
var elem = getElem(id); bindEvent(elem, type, fn);
},
unBind : function(id, type, fn) {
var elem = getElem(id); unBindEvent(elem, type, fn);
},
init : function(id, minWidth, minHeight, extraWidth, extraHeight, autoScroll) {
if (!inner.getEl(id)) {
return ;
} minWidth = minWidth || 1000;
minHeight = minHeight || 600;
extraWidth = extraWidth || 0;
extraHeight = extraHeight || 0; if (typeof(autoScroll) != 'boolean') {
autoScroll = true;
} var delayTimer = null; function adjustSize() {
var elem = inner.getEl(id);
elem.style.display = 'block'; var ua = navigator.userAgent.toLowerCase();
var isStrict = document.compatMode == "CSS1Compat";
var isOpera = /opera/.test(ua);
var isIE = !isOpera && /msie/.test(ua); var winWidth = 0, winHeight = 0; if (!isStrict && !isOpera) {
winWidth = document.body.clientWidth;
} else if (isIE) {
winWidth = document.documentElement.clientWidth;
} else {
winWidth = window.innerWidth;
} if (isIE) {
winHeight = isStrict ? document.documentElement.clientHeight : document.body.clientHeight;
} else {
winHeight = window.innerHeight;
} window.console && window.console.log('isStrict:', isStrict);
window.console && window.console.log('winWidth:', winWidth);
window.console && window.console.log('winHeight:', winHeight); var w = winWidth - extraWidth;
var h = winHeight - extraHeight; if (autoScroll) {
w = Math.max(minWidth, w);
h = Math.max(minHeight, h);
} elem.style.height = h + 'px';
elem.style.width = w + 'px'; window.console && window.console.log('width:', w);
window.console && window.console.log('height:', h);
} function delayResize() {
if (delayTimer != null) {
clearTimeout(delayTimer);
delayTimer = null;
} delayTimer = setTimeout(function() {
adjustSize();
}, 0);
} inner.domReady(adjustSize);
inner.bind(window, 'load', delayResize);
inner.bind(window, 'resize', delayResize);
}
} }();
使用方法:
BOJOY_Resize.init(swfId, minWidth, minHeight, 固定预留的宽度, 固定预留的高度, 是否需要显示滚动条-Boolean);
*固定预留的宽、高指的页面需要固定显示的内容,它们的宽、高,例如页面左侧有一个游戏攻略,顶部有一个全局提示消息等。上面的脚本支持iframe嵌套
参考链接:
2-3px space below Flash object in Firefox...
Font-size adds extra space when positioning text elements in Opera
Extra 2-3px below Flash object on Firefox
Flash对象插入到网页中的3px问题的更多相关文章
- 前端页面js与flash交互——js获取flash对象,并传递参数
背景介绍: 最近在搞一个项目,涉及到图片选取,裁剪,上传等,由于浏览器安全性问题,js无法获取到<input type="file">中选取的文件路径,而且对照片的裁剪 ...
- 网页中插入FLASH(swf文件),并且让Flash不遮挡HTML元素
一:网页中插入flash代码如下: 当然里面的很多属性可以去掉,根据具体的需求而定. 我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签.鉴于火狐及 ...
- 网页中插入Flash动画(.swf)代码和常用参数设置
我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...
- 网页中插入swf动画(embed)
网页中插入swf动画(embed:[ɪm'bed]) 例题: <embed src="swf.sef" width="200" height=" ...
- 在网页中插入背景音乐代码(html)
有两种 分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0,隐藏播放器. 二者的参数如 ...
- 网页中插入外部视频的几种方法(PC与手机网页通用)
网页中加入视频的几种方法(PC与手机网页通用) 方法一: <!doctype html> <html> <head> <meta charset=" ...
- 在网页中怎样给已发布的Flash添加链接的方法(zhuan)
因为网页中的 Flash 是以控件形式出现的,优先级别较高,所以直接对它加链接是无效的,不过可以用按钮控件 BUTTON 来实现. 具体步骤 1.直接在按钮上加上onClick事件打开指定页面: &l ...
- 用flvplayer.swf在网页中播放视频(网页中flash视频播放的实现)
原:http://blog.csdn.net/ricciozhang/article/details/46868201 由于公司项目的需求,需要在展示一些信息的时候能够播放视频,拿到这个要求,我就从最 ...
- 网页中flash设置
我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...
随机推荐
- extjs6入门:用sencha cmd搭建简单的extjs6项目
开发准备 1.sencha cmd安装 2.extjs6.0.0 gpl正式版下载,地址:https://www.sencha.com/legal/gpl/ ,解压ext-6.0.0-gpl.zip ...
- CAS单点登录安装笔记
http://lib.iteye.com/blog/166619 https://www.cnblogs.com/zhenyulu/archive/2013/01/22/2870838.html
- Djang1.8+Python2.0迁移到Django2.0+Python3.6注意事项(转)
Djang1.8+Python2.0迁移到Django2.0+Python3.6注意事项 参考:https://blog.csdn.net/weixin_40475396/article/detail ...
- 【Ray Tracing in One Weekend 超详解】 光线追踪1-6
新的一年,前来打卡 Preface 回顾上一篇,我们讲述了漫反射材质,也就是平时的磨砂表面. 它一种将入射光经表面随机散射形成的材质,是一种非常普遍的表面形式. 这一篇,我们将来学习镜面反射,或者说是 ...
- 使用djcelery发送邮件
发送邮件作为一个独立的业务模块,我们把它放到另外一个文件中,定义一个task文件,里面定义发送邮件的功能, 需要用到django.core.mail 里面的send_mail这个函数 发送邮件与网络环 ...
- Odoo访问权限(一)
Odoo访问权限(一) 四个ODOO权限管理层次 一. Odoo 菜单级别: 即,不属于指定菜单所包含组的用户看不到该菜单.不安全,只是隐藏菜单,若用户知道菜单ID,仍然可以通过指定URL访问 二. ...
- Chrome导出书签瘦身,去除ADD_DATE和ICON
Chrome等浏览器导出的书签是一个html文件,每个链接是一个a标签,由于保存着添加时间和图标显得太臃肿. 原本的样子: 我们利用sublime的正则替换,变成一个清爽的样子. 正则表达式:ADD_ ...
- 工具使用-----Jmeter-脚本的录制
//转载 http://www.cnblogs.com/fnng/archive/2011/08/20/2147082.html 以下是我自己录制的关于这篇文章的视频,有兴趣的可以下载哦 https ...
- Linux学习笔记04—IP配置
一.自动获取IP只有一种情况可以自动获取IP地址,那就是你的Linux所在的网络环境中有DHCP服务.只要你的真机可以自动获取IP,那么安装在虚拟机的Linux同样也可以自动获取IP. 方法很简单,只 ...
- UIScrollView 遇到的小坑
在做一个 UIScrollView 展示的时候 ,须要计算 contentSize 的高度,于是 我遍历了一下 UIScrollView 全部的子view的高度累加 然后得出 高度 .奇怪的是 发现 ...