Открытие страницы в фоновом режиме div

Question

Я делаю сайт, который имеет две колонки div. в правом столбце у меня есть несколько кнопок, которые, когда я нажимаю, я бы хотел, чтобы они открылись за кнопками в правом столбце, чтобы вы все еще могли видеть кнопки. В идеале я бы хотел сделать это без использования iframes. Я попытался использовать 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. Вам нужно запустить HTML с локального сервера HTTP (что-то вроде localhost:3000/index.html); Ваш код будет работать неправильно, если вы откроете его непосредственно из файловой системы, например file:///D:/index.html в строке url. Он вернет следующую ошибку в консоли:

   XMLHttpRequest не может загрузить файл: /// D: /video.html. Запросы на кросс-начало поддерживаются только для HTTP.

2. Попробуйте использовать xmlhttp.open("GET","video.html",true); вместо метода POST, если вы просто читаете статические html-файлы.