Я пытаюсь изменить содержимое <div> на содержимое внешнего файла HTML при нажатии кнопки. Еще лучше, если я смогу изменить его на <div>, специфичный для внешнего HTML-файла, но маленькие шаги.
Я знаю, что то, что я пытаюсь сделать, было бы проще с ajax или jQuery, но я надеюсь получить прочную основу в Javascript, HTML и CSS, прежде чем заняться ими.
Проблема в том, что я не могу понять, как указать на содержимое в test.html, не возвращая только прямой URL-адрес:
allCalcs.html:
<!DOCTYPE html>
<head>
<title>Toying with iFrames</title>
</head>
<body>
<script src="allCalcs.js"></script>
<a href="#" id="Home" onclick="showCalc()">Home</a>
<div id="content">currently unchanged</div>
<iframe frameborder="0" id="testFrame" scrolling="no" allowtransparency="true" style="left:0px; top:0px; width:100%; height:1px" src="test.html">
content inside the iframe that shouldn't display instead of test.html
</iframe>
</body>
</html>
allCalcs.js
//this should make something appear below the clicky
function showCalc(){
iFrameName = document.getElementById("testFrame");
iFrameName.style.display="block";
document.getElementById("content").innerHTML=iFrameName.innerHTML;
}
test.html
This is test.html
РЕДАКТИРОВАТЬ: с function show() измененным на приведенное ниже, пытаясь вытащить содержимое iframe с помощью iframe.contentDocument.body.innerHTML, он все еще не работает: EDIT2: нижеприведенное работает, но только когда файл размещен на веб-сервере. Локально не получится.
function show()
{
var iframe= document.getElementById("testFrame");
var iframe_contents = iframe.contentDocument.body.innerHTML;
document.getElementById("content").innerHTML= iframe_contents;
}
