我有以下代码...
<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>
答案 0 :(得分：2)
关于Hristo的评论，请尝试添加id =＆＃34; previewFrame＆＃34;到iframe本身，然后更新getElementById以调用previewFrame。
e.g。
<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框架来更轻松地选择和显示元素。
答案 1 :(得分：0)
尝试从style="display: none;" ...？
<iframe>