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

可能存在两个问题：

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

XMLHttpRequest无法加载file：/// D：/video.html。只有HTTP支持跨源请求。
如果您只是阅读静态html文件，请尝试使用xmlhttp.open("GET","video.html",true);代替POST方法。

在div的背景中打开页面

1 个答案: