使用 JavaScript 显示隐藏的 div
我有以下代码是正确的...
<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>
I have the following code right...
<div id="viewFrame">
<iframe src="preview.php" name="previewFrame" width="100%" height="100%" style="display:none;"></iframe>
</div>
And also:
<script type="text/javascript">
function previewFrame(){
document.preview.submit();
var preview = document.getElementById('viewFrame');
preview.style.display = 'block';
}
</script>
...Oh, and I also have
<form name="preview" action="preview.php" method="post" target="previewframe">
Some more code here...
</form>
It will hide the div but when I try to submit the form, it won't show the iframe. Anyone know what is wrong?
EDIT: Ok, here is the full code for the page:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
离开 Hristo 的评论，尝试将 id="previewFrame" 添加到 iframe 本身，然后更新 getElementById 以调用 PreviewFrame。
例如
或者
只是使用 JavaScript 框架来更轻松地选择和显示元素。
Going off of Hristo's comment, try adding id="previewFrame" to the iframe itself, and then update getElementById to call previewFrame.
e.g.
and
Or just use a JavaScript framework to more easily select and show elements.
尝试从
中删除style="display: none;"...？Try removing
style="display: none;"from the<iframe>...?