需求：公司项目需要兼容IE8，但是无法使用框架，侧边栏要在短期内更新版本为侧边栏无刷新。
解决方法：最快的方法就是使用iframe。
实现思路：新建一个新的main.html页面，页面内容是顶部侧边栏和左侧侧边栏内容，页面的中间部分只使用一个iframe，不同的页面切换时，iframe的src地址切换。
1.main.html页面代码
侧边栏的元素代码以及
<iframe name="mainiframe" src="/Initial.html" id="mainiframe" scrolling="yes" onload="resizeFrameHeight()" frameborder="0" width="100%"></iframe>
点击侧边栏a标签，a标签的src地址会复制到
侧边栏的a标签需要跳转页面的，要添加一个target属性，target的值为iframe的name值，比如我的target="mainiframe"，然后点击侧边栏a标签，iframe的src就会转换为a标签的src，实现侧边栏无刷新。
2.如果main.html想使用iframe页面的方法，可以如下，兼容到IE8：
/**
* 加载iframe中sonff公共函数
*/
$(document).ready(function(e){
var iframe = document.getElementById("mainiframe");
if(document.documentMode == 8){
$("#mainiframe")[0].contentWindow.sonff();
if (iframe.attachEvent) {
iframe.attachEvent("onload", function() {
//iframe加载完成后你需要进行的操作
$("#mainiframe")[0].contentWindow.sonff();
});
} else {
iframe.onload = function() {
//iframe加载完成后你需要进行的操作
$("#mainiframe")[0].contentWindow.sonff();
};
}
}else{
if (iframe.attachEvent) {
iframe.attachEvent("onload", function() {
//iframe加载完成后你需要进行的操作
$("#mainiframe")[0].contentWindow.sonff();
});
} else {
iframe.onload = function() {
//iframe加载完成后你需要进行的操作
$("#mainiframe")[0].contentWindow.sonff();
};
}
}
});
2.如果iframe想使用页面main.html的方法，可以如下，兼容到IE8：
$(".nav .comparisonUl",parent.document).show();
在元素后面加个,parent.document就可以了。
3.设置iframe高度
function resizeFrameHeight(){
var ifm = document.getElementById("mainiframe");
ifm.height = document.documentElement.clientHeight - 50;
}
window.onresize=function(){
resizeFrameHeight();
}
4.后续有关于iframe需要用到的会继续更新
网友评论