浏览器兼容

最新推荐文章于 2024-09-30 15:23:15 发布

dayInAndDayOut

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量632

点赞数

文章标签： javascript 原生代码兼容 dom

本文链接：https://blog.csdn.net/dayInAndDayOut/article/details/9950153

版权

1.event

function demo(event){
	var event=event||window.event;
	var e=event.srcElement||event.target;
   alert("我是"+e.tagName+"标签");
}

2.获得窗口的位置

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;


alert("Left: " + leftPos);
alert("Top: " + topPos);

3.获得窗口的宽高

var pageWidth = window.innerWidth,pageHeight = window.innerHeight;    
          
if (typeof pageWidth != "number"){
	if (document.compatMode == "CSS1Compat"){
		pageWidth = document.documentElement.clientWidth;
		pageHeight = document.documentElement.clientHeight;
	} else {
		pageWidth = document.body.clientWidth;
		pageHeight = document.body.clientHeight;
	}
}

alert("Width: " + pageWidth);
alert("Height: " + pageHeight);

4.NodeList转换为数组

虽然可以通过方括号访问NodeList的值，而这个对象也有length属性，但是他并不是Array的实例，如果要把NodeList转化为数组可以通过Array.prototype.slice()方法
Array.prototype.slice(someNode.childNodes,0) //IE下出错
由于IE将NodeList实现为一个com对象，而我们不能像JScript那样使用这种对象，所以在IE中会导致错误，想要在IE下将NodeList转换为数组只能枚举所有的成员

function convertToArray(nodes){
	var array = null;
	try{
		array = Array.prototype.slice(nodes,0); //针对非IE浏览器 
	}catch(ex){
		array = new Array();
		for(var i=0, j=nodes.length; i<j; i++){
			array.push(nodes[i]);
		}
	}
	return array;
}

5.name与ID不要重名

<input type="text" name = "myElement"/>
<div id="myElement"></div>

基于这段HTML代码，IE7中调用document.getElementById("myElement");结果会返回input元素；而在其他浏览器中都会返回对div的引用。为了避免IE中存在的这种问题，最好的办法是不让表单字段的name特性与其他元素ID相同

6.tagName

在HTML中标签名，标签名始终都以全部大写表示，而在xml包括XHTML中，标签名始终都与源代码中保持一致，如果你不确定自己的脚本会是在XML还是在HTML中执行，最好在比较前全部转换成相同大小写形式

if(element.tagName == "div"){  //不能这样比较，很容易出错
	
}
if(element.tagName.toLowerCase() == "div"){	//这样最好（适用于任何文档）

}

7.将dom结构序列化为XML或HTML字符串

IE7及更早版本会返回HTML所有特性，包括没有指定的特性，在IE中所有未指定特性的specified都为false，而在其他浏览器中根本不会为这类特性生成对应的特性节点

<html>
<body>
    <div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr" my_special_attribute="hello!">Some text</div>
    <input type="button" value="Get Div Attributes" οnclick="getDivAtts()" />
    <script type="text/javascript">
        function outputAttributes(element){
            var pairs = new Array();
            for (var i=0, len=element.attributes.length; i < len; i++){
                var attrName = element.attributes[i].nodeName;
                var attrValue = element.attributes[i].nodeValue;
                if (element.attributes[i].specified){  //兼容IE
                    pairs.push(attrName + "=\"" + attrValue + "\"");
                }
            }
            return pairs.join(" ");
        }

        
        function getDivAtts(){
            alert(outputAttributes(document.getElementById("myDiv")));
        }

    </script>
</body>
</html>

8.遍历chaildNodes

IE只会返回dom节点，而其他浏览器则会返回dom节点和文本节点，所以要在执行某项操作前需要先检查下nodeType属性

for(var i=0,len=element.childNodes.length; i<len; i++){
	if(element.childNodes[i].nodeType == 1){		//元素element ==》1
		//执行某些操作
		alert(i);
	}
}

9.动态脚本

动态加载外部javascript文件能立即运行

function loadScript(url){
	var script = document.createElement("script");
	script.type="text/javascript";
	script.src = url;
	document.body.appendChild(script);
}
loadScript("test.js");

10.与eval()相同的操作

以这种方式加载的代码会在全局作用域中执行，而且当脚本执行后可立即使用。实际上这样执行代码与在全局作用域下与在全局作用域中把字符串传递给eval()是一样的

<html>
<head>
    <title>Dynamic Script Example 2</title>
</head>
<body>
    <p>You should see an alert saying "hi" after clicking the button.</p>
    <input type="button" value="Add Script" οnclick="addScript()" />

    <script type="text/javascript">
    
        function loadScriptString(code){
            var script = document.createElement("script");
            script.type = "text/javascript";
            try {
                script.appendChild(document.createTextNode(code));		//IE中会导致错误抛出
            } catch (ex){	
                script.text = code;
            }
            document.body.appendChild(script);
        }
    
        function addScript(){
            loadScriptString("function sayHi(){alert('hi');}");
            sayHi();
        }

    </script>
</body>
</html>

11.动态加载css外部文件<link>

以下代码在所有主流浏览器下都能正常运行，需要注意的是，必须将<link>加载到<head>而不是<body>，才能保证在所有浏览器中的行为一直

function includeStyle(url){
    var style = document.createElement("link");
    style.type = "text/css";
    style.setAttribute("rel","stylesheet");
    style.setAttribute("href",url);
    document.getElementsByTagName("head")[0].appendChild(style);
};

12.动态样式<style>

以下代码同样在IE中会报错。IE将<style>视为一个特殊的、与<script>类似的节点，不允许访问其子节点。事实上，IE此时抛出的错误与问题11向<scritp>

<html>
<head>
    <title>Dynamic Style Example 2</title>
</head>
<body>
    <p>You should see the background color change after clicking the button.</p>
    <input type="button" value="Add Style" οnclick="addStyle()" />

    <script type="text/javascript">
        function loadStyleString(css){
            var style = document.createElement("style");
            style.type = "text/css";
            try{
                style.appendChild(document.createTextNode(css));
            } catch (ex){
                style.styleSheet.cssText = css;
            }
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(style);
        }
    
        function addStyle(){
            loadStyleString("body{background-color:red}"); 
        }

    </script>
</body>
</html>

13.框架的contentDocument

DOM2级中，这个属性包含一个指针，指向所表示框架内容的文档对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>DOM Level 2 IFrame Example</title>
</head>
<body>
    <iframe id="myIframe" src="javascript:false"></iframe>
    <script type="text/javascript">
        var iframe = document.getElementById("myIframe");
        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        console.log(iframeDoc);
    </script>
</body>
</html>

IE8之前不支持框架中的此属性，但支持一个叫contentWindow属性，该属性返回框架的window对象，而这个window对象由有一个document属性。

访问框架或内嵌框架的文档对象要受到跨域安全策略的限制。如果某个框架中的页面来自其他域或不同子域，或使用了不同的协议，那么访问这个框架的文档对象就会导致错误。