javascript - div后台打开页面

Question

我正在制作一个有两个 div 列的网站。在右栏中，我有许多按钮，当我单击它们时，我希望它们在右栏的按钮后面打开，这样您仍然可以看到按钮。理想情况下，我希望在不使用 Iframe 的情况下执行此操作。我试过使用 Ajax，但不确定为什么它不起作用。这是代码:

CSS:

html,
body {
height: 100%;
margin: 0px auto;
}

#main,
#col_l,
#col_r
{
height: 100%;
}

div[id*="col"]
{
float: left;
width: 50%;
overflow: auto;
}   

#col_r{
overflow:hidden;
}   

Javascript:

function loadXMLDoc() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("col_r").innerHTML=xmlhttp.responseText;
     }
 }
 xmlhttp.open("POST","video.html",true);
 xmlhttp.send();
 }

HTML 链接:

<div id=col_r>
<a href="javascript: loadXMLDoc();">test</a>
</div>

让我知道你的想法。非常感谢!

Answer 1

可能有两个可能的问题:

1. 您需要从本地 http 服务器(类似于 localhost:3000/index.html)运行您的 html；如果您直接从文件系统打开代码，例如 url 栏中的 file:///D:/index.html，您的代码将无法正确运行。它将在控制台中返回以下错误:

   XMLHttpRequest 无法加载 file:///D:/video.html。仅 HTTP 支持跨源请求。

2. 如果您只是读取静态 html 文件，请尝试使用 xmlhttp.open("GET","video.html",true); 而不是 POST 方法.