我有下面的代码...
<div id="viewFrame">
<iframe src="preview.php" name="previewFrame" width="100%" height="100%" style="display:none;"></iframe>
</div>
还有:
<script type="text/javascript">
function previewFrame(){
document.preview.submit();
var preview = document.getElementById('viewFrame');
preview.style.display = 'block';
}
</script>
...哦，我也有
<form name="preview" action="preview.php" method="post" target="previewframe">
Some more code here...
</form>
它会隐藏 div，但当我尝试提交表单时，它不会显示 iframe。谁知道哪里出了问题？
编辑:好的，这是页面的完整代码:
<head>
<title>EasyPage</title>
<?
session_start();
if(!session_is_registered(myusername)){
header("location:main_login.php");
}
?>
<script type="text/javascript">
function insertlink(){
var url = prompt("URL:");
var text = prompt("Text:");
var link = "<a href=" + url + ">" + text + "</a>";
var linksbox = document.getElementById("links");
linksbox.value = linksbox.value + link;
}
function insertlink2(){
var url = prompt("URL:");
var text = prompt("Text:");
var link = "<a href=" + url + ">" + text + "</a>";
var contentbox = document.getElementById("content");
contentbox.value = contentbox.value + link;
}
function insertimage(){
var url = prompt("Image URL:");
var image = "<img src=" + url + " />";
var contentbox = document.getElementById("content");
contentbox.value = contentbox.value + image;
}
function insertlineopen(){
var line = "<p>";
var contentbox = document.getElementById("content");
contentbox.value = contentbox.value + line;
}
function insertlineclose(){
var line = "</p>";
var contentbox = document.getElementById("content");
contentbox.value = contentbox.value + line;
}
function previewFrame(){
document.preview.submit();
var preview = document.getElementById('previewFrame');
preview.style.display = 'block';
}
</script>
</head>
<body style="background-color:black">
<div style="font-size:72px; text-align:center; font-family:Verdana, Arial, Times New Roman; color:lime; background-color:black;">
<b>EasyPage</b>
</div>
<div style="font-size:24px; text-align:right; font-family:Sans Serif; color:; background-color:orange;">
<a href="/index.php">Home</a> <a href="/create.php">Create</a> <a href="/logout.php">Logout</a>
</div>
<div style="font-size:18; text-align:center; font-family:Verdana, Arial, Times New Roman; color:yellow; background-color:black;">
<form name="create" action="process.php" method="post" target="_blank">
<form name="preview" action="preview.php" method="post" target="previewFrame">
<table style="color:yellow; margin:auto;">
<tr><td colspan="3"><hr /></td></tr>
<tr><td>Title: </td><td><input type="text" name="title" /> </td><td><i>This text shows in the title bar</i></td></tr>
<tr><td>Background Colour: </td><td><input type="text" name="back" /> </td><td><i>The background colour of the entire page.</i></td></tr>
<tr><td colspan="3"><hr /></td></tr>
<tr><td colspan="3" style="text-align:center;">Heading:</td></tr>
<tr><td>Text: </td><td><input type="text" name="heading" /> </td><td><i>The heading at the top of the page.</i></td></tr>
<tr><td>Size: </td><td><input type="text" name="hsize" /> </td><td><i>The size of the heading.</i></td></tr>
<tr><td>Align: </td><td><input type="radio" name="halign" value="left" /> Left <input type="radio" name="halign" value="center" /> Center <input type="radio" name="halign" value="right" /> Right </td><td><i>The alignment of the heading.</i></td></tr>
<tr><td>Font Family: </td><td><input type="text" name="hfont" /> </td><td><i>The font style for the heading.</i></td></tr>
<tr><td>Colour: </td><td><input type="text" name="hcolor" /> </td><td><i>The colour of the heading.</i></td></tr>
<tr><td>Background Colour: </td><td><input type="text" name="hback" /> </td><td><i>The background colour of the heading.</i></td></tr>
<tr><td colspan="3"><hr /></td></tr>
<tr><td colspan="3" style="text-align:center;">Link Bar:</td></tr>
<tr><td colspan="3" style="text-align:right; color:white; cursor:pointer;"><a onclick="insertlink()"><u>Insert Link</u></a></td></tr>
<tr><td>Links: </td><td><input type="text" name="links" id="links" /> </td><td><i>The links that show below the heading.</i></td></tr>
<tr><td>Size: </td><td><input type="text" name="lsize" /> </td><td><i>The size of the links.</i></td></tr>
<tr><td>Align: </td><td><input type="radio" name="lalign" value="left" /> Left <input type="radio" name="lalign" value="center" /> Center <input type="radio" name="lalign" value="right" /> Right </td><td><i>The alignment of the links.</i></td></tr>
<tr><td>Font Family: </td><td><input type="text" name="lfont" /> </td><td><i>The font style for the links.</i></td></tr>
<tr><td>Background Colour: </td><td><input type="text" name="lback" /> </td><td><i>The background colour of the link bar.</i></td></tr>
<tr><td colspan="3"><hr /></td></tr>
<tr><td colspan="3" style="text-align:center;">Content:</td></tr>
<tr><td colspan="3" style="text-align:right; color:white; cursor:pointer;"><a onclick="insertlineopen()"><u>Open New Line</u></a> <a onclick="insertlineclose()"><u>Close Line</u></a> <a onclick="insertlink2()"><u>Insert Link</u></a> <a onclick="insertimage()"> <u>Insert Image</u></a></td></tr>
<tr><td>Content: </td><td><input type="text" name="content" id="content" /> </td><td><i>The page content.</i></td></tr>
<tr><td>Size: </td><td><input type="text" name="csize" /> </td><td><i>The size of the text content.</i></td></tr>
<tr><td>Align: </td><td><input type="radio" name="calign" value="left" /> Left <input type="radio" name="calign" value="center" /> Center <input type="radio" name="calign" value="right" /> Right </td><td><i>The alignment of the content.</i></td></tr>
<tr><td>Font Family: </td><td><input type="text" name="cfont" /> </td><td><i>The font style for the text content.</i></td></tr>
<tr><td>Colour: </td><td><input type="text" name="ccolor" /> </td><td><i>The colour of the text content.</i></td></tr>
<tr><td>Background Colour: </td><td><input type="text" name="cback" /> </td><td><i>The background colour of the content.</i></td></tr></tr>
<tr><td colspan="3"><hr /></td></tr>
<tr><td colspan="3" style="text-align:center;">Footer:</td></tr>
<tr><td>Text: </td><td><input type="text" name="footer" /> </td><td><i>The footer text.</i></td></tr>
<tr><td>Size: </td><td><input type="text" name="fsize" /> </td><td><i>The size of the footer.</i></td></tr>
<tr><td>Align: </td><td><input type="radio" name="falign" value="left" /> Left <input type="radio" name="falign" value="center" /> Center <input type="radio" name="falign" value="right" /> Right </td><td><i>The alignment of the footer.</i></td></tr>
<tr><td>Font Family: </td><td><input type="text" name="ffont" /> </td><td><i>The font style for the text content.</i></td></tr>
<tr><td>Colour: </td><td><input type="text" name="fcolor" /> </td><td><i>The colour of the footer.</i></td></tr>
<tr><td>Background Colour: </td><td><input type="text" name="fback" /> </td><td><i>The background colour of the footer.</i></td></tr>
<tr><td colspan="3"><hr /></td></tr>
<tr><td>Filename: </td><td><input type="text" style="text-align:right;" value="index" name="filename" />.html </td><td><i>The name of the file. (For security reasons, file extensions cannot be changed.)</i></td></tr>
<tr><td colspan="3" style="text-align:center;"><a onclick="previewFrame()" style="color:white; cursor:pointer;"><u>Preview</u></a> <input type="submit" value="Create" /></td></tr>
</table>
<div id="viewFrame">
<iframe src="preview.php" id="previewFrame" name="previewFrame" width="100%" height="100%" style="display:none;"></iframe>
</div>
</form>
</form>
</div>
Copyright 2012, Nathan Piercy. All rights reserved.
</div>
</body>
最佳答案
根据 Hristo 的评论，尝试将 id="previewFrame"添加到 iframe 本身，然后更新 getElementById 以调用 previewFrame。
例如
<div id="viewFrame">
<iframe src="preview.php" id="previewFrame" name="previewFrame" width="100%" height="100%" style="display:none;"></iframe>
</div>
和
<script type="text/javascript">
function previewFrame(){
document.preview.submit();
var preview = document.getElementById('previewFrame');
preview.style.display = 'block';
}
</script>
或者只是使用 JavaScript 框架来更轻松地选择和显示元素。
关于javascript - 使用 JavaScript 显示隐藏的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9137645/