在div中加载一个完整的页面，不用iframe，引进页面的js及css都要生效

如题，需要在一个div中加载一个完整的页面，此引用页面中引用了css样式和js文件，主页面中没有这些样式及js

要求页面加载到div中样式及css都生效
不能将这些加到主页面。考虑到特殊应用，不能使用iframe

谁有这样的代码
我知道jQuery实现了这个功能
调用方式是
$("divid").load("url");

如果没有其它的好的代码，谁能帮忙把jQuery里面的这个函数提取出来也行，谢谢

只有95分了，挣够了分再加……

3 个解决方案

#1


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
    var xmlHttp=null;      
        
        function createXMLHttpRequest() 
        { 
            if(xmlHttp == null){
                if(window.XMLHttpRequest) {
                    //Mozilla 浏览器
                    xmlHttp = new XMLHttpRequest();
                }else if(window.ActiveXObject) {
                    // IE浏览器
                    try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                            //alert('创建失败');
                        }
                    }
                }
            }
        } 
        function openAjax() 
        {   
            if( xmlHttp == null)
            {                
                createXMLHttpRequest();  
                if( xmlHttp == null)
                {
                    //alert('出错');
                    return ;
                }
            }                                                           
                         
            xmlHttp.open("get",url+"?date="+new Date(),true);             
            xmlHttp.onreadystatechange=xmlHttpChange; 
            xmlHttp.send(null); 
            
            document.getElementById('resultDiv').innerText='正在加载,请稍候...';
        } 
        
        function xmlHttpChange() 
        {         
            if(xmlHttp.readyState==4) 
            {                             
                if(xmlHttp.status==200) 
                {          
                    var res=xmlHttp.responseText;                          
                    document.getElementById('resultDiv').innerText=res;
                } 
            } 
        }       

</script>
</head>
<body>
    <form id="form1" >        
       <input type='button' value='click me' onclick='openAjax();' />
<div id="resultDiv"></div> 
    </form>
</body>
</html>

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/Sandy945/archive/2009/05/12/4169870.aspx

#2

引用 1 楼 sandy945 的回复:

HTML code<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>无标题页</title><scripttype="text/javascript">var xmlHttp=null;function createXMLHttpRequest()
        {if(xmlHttp==null){if(window.XMLHttpRequest) {//Mozilla 浏览器                    xmlHttp=new XMLHttpRequest();
                }elseif(window.ActiveXObject) {// IE浏览器try {
                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                    }catch (e) {try {
                            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }catch (e) {//alert('创建失败');                        }
                    }
                }
            }
        }function openAjax()
        {if( xmlHttp==null)
            {
                createXMLHttpRequest();if( xmlHttp==null)
                {//alert('出错');return ;
                }
            }

            xmlHttp.open("get",url+"?date="+new Date(),true);
            xmlHttp.onreadystatechange=xmlHttpChange;
            xmlHttp.send(null);

            document.getElementById('resultDiv').innerText='正在加载,请稍候...';
        }function xmlHttpChange()
        {if(xmlHttp.readyState==4)
            {if(xmlHttp.status==200)
                {var res=xmlHttp.responseText;
                    document.getElementById('resultDiv').innerText=res;
                }
            }
        }</script></head><body><formid="form1"><inputtype='button'value='clickme' onclick='openAjax();'/><divid="resultDiv"></div></form></body></html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/Sandy945/archive/2009/05/12/4169870.aspx

这种方式js和css样式不能执行！

#3



jQuery.fn.extend({
	// Keep a copy of the old load
	_load: jQuery.fn.load,

	load: function( url, params, callback ) {
		if ( typeof url !== "string" )
			return this._load( url );

		var off = url.indexOf(" ");
		if ( off >= 0 ) {
			var selector = url.slice(off, url.length);
			url = url.slice(0, off);
		}

		// Default to a GET request
		var type = "GET";

		// If the second parameter was provided
		if ( params )
			// If it's a function
			if ( jQuery.isFunction( params ) ) {
				// We assume that it's the callback
				callback = params;
				params = null;

			// Otherwise, build a param string
			} else if( typeof params === "object" ) {
				params = jQuery.param( params );
				type = "POST";
			}

		var self = this;

		// Request the remote document
		jQuery.ajax({
			url: url,
			type: type,
			dataType: "html",
			data: params,
			complete: function(res, status){
				// If successful, inject the HTML into all the matched elements
				if ( status == "success" || status == "notmodified" )
					// See if a selector was specified
					self.html( selector ?
						// Create a dummy div to hold the results
						jQuery("<div/>")
							// inject the contents of the document in, removing the scripts
							// to avoid any 'Permission Denied' errors in IE
							.append(res.responseText.replace(/<script(.|\s)*?\/script>/g, ""))

							// Locate the specified elements
							.find(selector) :

						// If not, just inject the full result
						res.responseText );

				if( callback )
					self.each( callback, [res.responseText, status, res] );
			}
		});
		return this;
	},

	serialize: function() {
		return jQuery.param(this.serializeArray());
	},
	serializeArray: function() {
		return this.map(function(){
			return this.elements ? jQuery.makeArray(this.elements) : this;
		})
		.filter(function(){
			return this.name && !this.disabled &&
				(this.checked || /select|textarea/i.test(this.nodeName) ||
					/text|hidden|password|search/i.test(this.type));
		})
		.map(function(i, elem){
			var val = jQuery(this).val();
			return val == null ? null :
				jQuery.isArray(val) ?
					jQuery.map( val, function(val, i){
						return {name: elem.name, value: val};
					}) :
					{name: elem.name, value: val};
		}).get();
	}
});

谁能帮忙吧上面的jQuery中的代码用js完整的实现
谢谢

#1


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
    var xmlHttp=null;      
        
        function createXMLHttpRequest() 
        { 
            if(xmlHttp == null){
                if(window.XMLHttpRequest) {
                    //Mozilla 浏览器
                    xmlHttp = new XMLHttpRequest();
                }else if(window.ActiveXObject) {
                    // IE浏览器
                    try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                            //alert('创建失败');
                        }
                    }
                }
            }
        } 
        function openAjax() 
        {   
            if( xmlHttp == null)
            {                
                createXMLHttpRequest();  
                if( xmlHttp == null)
                {
                    //alert('出错');
                    return ;
                }
            }                                                           
                         
            xmlHttp.open("get",url+"?date="+new Date(),true);             
            xmlHttp.onreadystatechange=xmlHttpChange; 
            xmlHttp.send(null); 
            
            document.getElementById('resultDiv').innerText='正在加载,请稍候...';
        } 
        
        function xmlHttpChange() 
        {         
            if(xmlHttp.readyState==4) 
            {                             
                if(xmlHttp.status==200) 
                {          
                    var res=xmlHttp.responseText;                          
                    document.getElementById('resultDiv').innerText=res;
                } 
            } 
        }       

</script>
</head>
<body>
    <form id="form1" >        
       <input type='button' value='click me' onclick='openAjax();' />
<div id="resultDiv"></div> 
    </form>
</body>
</html>