浏览器兼容性问题，火狐可以，谷歌不可以
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器兼容性问题，火狐可以，谷歌不可以相关的知识，希望对你有一定的参考价值。
用js写了一个切换样式的（用下拉框选择样式切换）。但是在火狐浏览器可以实现切换，在谷歌和360浏览器就没有反应。求教大神指导。下面是有关代码，有些没有关系的我就删了。
<link href="css/红.css" rel="stylesheet" type="text/css" title="red"/>
<link href="css/蓝.css" rel="alternate stylesheet" type="text/css" title="blue" />
<link href="css/绿.css" rel="alternate stylesheet" type="text/css" title="green" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//皮肤样式切换
function switchStylestyle(styleName)
aa=document.styleSheets;
for(i=0;i<aa.length;i++)
aa[i].disabled=true;
if(aa[i].title==styleName)
aa[i].disabled=false;;
</script>
</head>
<body id="Application">
<div id="header"> <a id="logo" href="#"><img src="images/logo.png" border="none"/></a>
<div id="ComboBox">
<select name="ComboBox">
<option value="green" onclick="switchStylestyle('green')">green</option>
<option value="red" onclick="switchStylestyle('red')" selected="selected">red</option>
<option value="blue" onclick="switchStylestyle('blue')">blue</option>
</select>
</div>
或者你可以多贴一些代码不，可以直接复制调试的 参考技术A 您好！很高兴为您答疑！
设置HACK，实现多浏览器兼容问题，火狐下您可以配合Firebug使用。
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。 参考技术B 1、火狐浏览器是一个自由及开放源代码网页浏览器，使用Gecko排版引擎，支持多种操作系统，如Windows、Mac OS X及GNU/Linux[2] 等。Firefox独立于Windows内核，使用的是非ie核心。因此设置基本不受注册表控制。
2、谷歌浏览器又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。软件的名称是来自于称作Chrome的网络浏览器图形使用者界面（GUI）。但是目前网上支付还不支持谷歌浏览器。另外有些google服务被国内屏蔽，不能整合使用。
3、所以相对而言，谷歌浏览器的兼容性要差些，低于火狐浏览器。这也就是生活中我们遇到的有些操作火狐可以谷歌却不可以。 参考技术C 不是高手，发到firefox吧一定会有人帮你的
使用Iframe打印预览pdf，兼容谷歌火狐浏览器
功能场景：
- 点击页面的打印按钮，可以调用浏览器的打印功能，并预览打印pdf文件。
- 解决火狐浏览器出现about:blank问题。
功能实现：
实现思路：
- 使用接口获取pdf文件的二进制流，响应类型为blob
- 将拿到的二进制流使用new Blob得到一个blob对象
- 将blob对象使用URL.createObjectURL得到一个URL，iframe的src可以使用这个URL
- 将iframe隐藏并调用浏览器的打印功能print()
实现代码：
export const preview = (params) =>
return axios.post("/url", params, responseType: "blob" );
;
async print()
let res = await preview(params);
let blob = new Blob([res], type: "application/pdf" );
let href = window.URL.createObjectURL(blob);
let iframe = document.createElement("IFRAME");
iframe.style.visibility = "hidden";
iframe.src = href;
document.body.appendChild(iframe);
// 解决火狐浏览器无法打印预览
setTimeout(() =>
iframe.contentWindow.blur();
iframe.contentWindow.focus();
iframe.contentWindow.print();
URL.revokeObjectURL(href);
, 500);
,
在操作完毕后需要移除创建的iframe，否则页面高度将会被撑开
// 解决使用打印时高度被iframe撑开问题
let iframe = document.getElementsByTagName("iframe");
if (iframe && iframe.length)
iframe[0].parentNode.removeChild(iframe[0]);
补充：
1. 火狐浏览器出现about:blank原因
Firefox：打印页面包括about:blank只有about:blank
您将在firefox（ jsfiddle ）中获得一个空白页面，因为它将在加载任何内容之前打印iframe。 像$(document).onload()提到的方法不会帮助，因为他们只等待DOM加载和setTimeout()仍然可能导致错误，因为你不知道要花费多长时间加载iFrame。
参考文章：在Firefox中打印PDF
原因就是火狐会在加载内容之前打印iframe，所以这里使用setTimeOut等待iframe加载完毕。如果500ms不能解决问题的话，可以尝试延迟更多。
2. Blob对象
参考文章：jsBlob对象
blob表示二进制类型的大对象
var blob = new Blob([一个由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等对象构成的数组],
type:它代表了将会被放入到 blob 中的数组内容的 MIME 类型
endings:
"native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符
"transparent"，代表会保持 blob 中保存的结束符不变。
);
URL.createObjectURL 方法接收一个 Blob 对象，并在浏览器内存中创建一个 URL → Blob 映射，所以当不使用该URL后，应该使用URL.revokeObjectURL手动释放
blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641
3. contentWindow
参考文章：iframe.contentWindow 属性：关于contentWindow和contentDocument区分
contentWindow和contentDocument都是以 HTML 对象来返回 iframe 中的文档，可以通过所有标准的 DOM 方法来处理被返回的对象。
区别如下：
- contentWindow 这是个只读属性，返回指定的iframe的窗口对象。它虽然不是标准的一部分，但各个主流浏览器都支持。
- contentDocument Firefox 支持，IE6，IE7都不支持，IE8开始支持
兼容获取document对象：
var getIFrameDoc = function()
var iobj = document.createElement("iframe");
document.getElementsByTagName("body")[0].appendChild(iobj);
return iobj.contentDocument || iobj.contentWindow.document;
以上是关于浏览器兼容性问题，火狐可以，谷歌不可以的主要内容，如果未能解决你的问题，请参考以下文章
使用@media实现IE hack的方法,css 兼容ie，解决火狐谷歌兼容问题
xp系统安装loadRunner11无法录制谷歌、火狐浏览器脚本怎么破？