Question

如何将内容加载到html页面。请注意IM不允许使用php或C.只有javascript和html。

例如

将页面B加载到页面A

HTTP：myweb.com/index.html负载=网页B

谢谢。

Answer 1

向Page B

AJAX

使用 responseText
使用 innerHTML 属性显示div内的内容。

如果你可以使用js框架那么我会建议jQuery和@ marcgg的答案就可以了。

Answer 2

简单的JavaScript：

<html>
<head>
<script>
function getUrlVars() {
var map = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    map[key] = value;
});
return map;
}    
function createRequestObject() {
            var ro;
            // Mozilla, Safari,...
            if (window.XMLHttpRequest) {
                ro = new XMLHttpRequest();
                if (ro.overrideMimeType) {
                    ro.overrideMimeType('text/xml');
                    // See note below about this line
                }
                // IE
            } else if (window.ActiveXObject) {
                try {
                    ro = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        ro = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }
            if (!ro) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
            return ro;
        }
        function sndReq(param,server,handler) {
            //location.href = server+"?"+action; //uncomment if you need for debugging
            http = createRequestObject();
            http.open('GET', server, true);
            http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            http.onreadystatechange = handler;
            http.send(param);
        }
        handler_function = function()
        {
            if(http.readyState == 4)
            {
                if (http.status == 200)
                {
                    document.getElementById("your_div_element").innerHTML = http.responseText;
                }
                else
                {
                    alert('There was a problem with the request.');
                }
            }
        }

</script>
</head>
<body>
<div id="your_div_element"></div>
<script>
var getvars= getUrlVars();
sndReq(null, getvars['action'], handler_function);</script>
</body>
</html>

Answer 3

HTML：

//Page A
<html>
<head><title>Page A</title></head>
<body>
<div id="pageB"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#pageB').load('pageb.html')
    });
</script>
</body>
</html>

Answer 4

使用jQuery：

 $.ajax({
   type: "POST",
   url: "http://some.com/page.html",
   success: function(msg){
     alert( "here's your data: " + msg );
     jQuery("#yourDivID").html(msg);
   }
 });

http://docs.jquery.com/Ajax/jQuery.ajax

编辑：添加了如何将其放入div

JavaScript + Querystring + div

4 个答案: