使用CORS和javascript将xhtml文件加载到div元素_Javascript_Html_Cors

使用CORS和javascript将xhtml文件加载到div元素

javascript html cors

使用CORS和javascript将xhtml文件加载到div元素,javascript,html,cors,Javascript,Html,Cors,我想将另一个域中的页面加载到页面中的div元素。我正在使用CORS，它可以工作，因为它显示文件已加载到控制台日志中，但我无法将其添加到我的div中。下面是我的代码，让它更清楚： <script type="text/javascript"> function createCORSRequest(method, url){ var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr)

我想将另一个域中的页面加载到页面中的div元素。我正在使用CORS，它可以工作，因为它显示文件已加载到控制台日志中，但我无法将其添加到我的div中。下面是我的代码，让它更清楚：

<script type="text/javascript">
    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);
        } else if (typeof XDomainRequest !== "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);
        } else {
            xhr = null;
        }
        return xhr;
    }

    var request = createCORSRequest("get", "http://localhost:8080/test/header.xhtml");
    if (request){
        request.onreadystatechange = function() {
            if (request.readyState === 4) {
                if (request.status >= 200 && request.status < 400) {
                    var hpage = request.responseText;
                    document.getElementById("theader").innerHTML = hpage;
                } else {
                    alert("An error occured! Request Status: +"request.status);
                }
            }
        };
        request.send();
    }            
</script>    
<body>
    <div id="theader"></div>
</body>

如何在ader div中显示加载的页面

更新

我发现这发生在firefox和chrome中，因为我使用localhost。它在ie中工作，但只加载没有css和图像的文本。知道如何将整个页面加载到div中吗？我想我现在的问题是，页面是否像iframe一样加载CORS中的所有资源？如果是这样的话，怎么办？

div元素意味着只包含某些HTML元素：简而言之，就是可以在主体中找到的元素。但不是所有的HTML元素，尤其不是HTML或head元素。这就是为什么你的代码不起作用

要解决您的问题，您需要使用iframe，但从您的问题来看，这似乎不是您想要的，或者将body元素的内容放在div中，解析head并将其加载到当前head中

类似的东西没有经过测试：

var hpage = document.createElement("html");
hpage.innerHtml = request.responseText;

//Below you might want to write more robust code
//depending on the content of the response and how much you trust it
var head = hpage.getElementsByTagName("head")[0];
var body = hpage.getElementsByTagName("body")[0];
document.getElementById("theader").innerHTML = body.innerHTML;

//Now iterates over the children of head to find 
//the script and style elements, and you can append them to the head of the document
var currentHead = document.getElementsByTagName("head")[0];
var scripts = head.getElementsByTagName("script");
for (var i=0; i<scripts.length; i++) {
  currentHead.appendChild(scripts[i]);
}
//same thing for style elements, 
//you could even do that for all elements
//depending on what the response may contain

您是否在控制台日志中收到任何错误消息？request.responseText包含什么内容？你能在那里放一个断点并检查一下吗？aa同样，您没有检查请求是否返回200，其就绪状态是否为4请求已完成，响应是否已就绪。我更新了代码以检查就绪状态检查，发现请求状态为0，并且存在错误。但是我怎么才能知道错误是什么呢？我发现这发生在firefox和chrome中，因为我使用localhost。它在ie中工作，但只加载文本而不加载样式。知道为什么吗？图像应该很好用。可能是源是在页面上无效的相对路径。如果浏览器试图下载它们，您是否在“网络”选项卡中进行了检查？没有。由于它在firefox和chrome的localhost中不起作用，而且我不知道如何在ie中检查控制台，所以我将推迟这部分调试，直到上传到远程服务器。@user2911374在ie中，您可以按F12并转到“网络”选项卡，单击“开始捕获”。然后刷新页面并尝试请求。它会告诉你什么负载和什么不负载。谢谢@stackErr。原来它试图下载所有css、html和javascript，但没有下载图像。@user2911374那么您还需要帮助吗？否则你应该接受这个答案。