用JavaScript显示隐藏的div_Javascript_Css_Html

用JavaScript显示隐藏的div

javascript css html

用JavaScript显示隐藏的div,javascript,css,html,Javascript,Css,Html,我有下面的代码正确 <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.

我有下面的代码正确

<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>


函数previewFrame（）{
document.preview.submit（）；
var preview=document.getElementById（'viewFrame'）；
preview.style.display='block'；
}

……哦，我也有

<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>


简易页面
函数insertlink（）{
var url=prompt（“url:”）；
var text=提示（“文本：”）；
var link=“”；
var linksbox=document.getElementById（“链接”）；
linksbox.value=linksbox.value+link；
}
函数insertlink2（）{
var url=prompt（“url:”）；
var text=提示（“文本：”）；
var link=“”；
var contentbox=document.getElementById（“内容”）；
contentbox.value=contentbox.value+link；
}
函数insertimage（）{
var url=prompt（“图像url:”）；
var image=“”；
var contentbox=document.getElementById（“内容”）；
contentbox.value=contentbox.value+image；
}
函数insertlineopen（）{
var line=“”；
var contentbox=document.getElementById（“内容”）；
contentbox.value=contentbox.value+行；
}
函数insertlineclose（）{
var line=“”；
var contentbox=document.getElementById（“内容”）；
contentbox.value=contentbox.value+行；
}
函数previewFrame（）{
document.preview.submit（）；
var preview=document.getElementById（'previewFrame'）；
preview.style.display='block'；
}
简易页面

标题：此文本显示在标题栏中
背景色：整个页面的背景色。

标题：
文本：页面顶部的标题。
大小：标题的大小。
对齐：左-中-右标题对齐。
字体系列：标题的字体样式。
颜色：标题的颜色。
背景色：标题的背景色。

链接栏：
插入链接
链接：标题下方显示的链接。
大小：链接的大小。
对齐：左-中-右链接对齐。
字体系列：链接的字体样式。
背景色：链接栏的背景色。

内容：
打开新行关闭行插入链接插入图像
内容：页面内容。
大小：文本内容的大小。
对齐：左-中-右内容对齐。
字体系列：文本内容的字体样式。
颜色：文本内容的颜色。
背景色：内容的背景色。

页脚：
文本：页脚文本。
大小：页脚的大小。
对齐：左-中-右对齐页脚。
字体系列：文本内容的字体样式。
颜色：页脚的颜色。
背景色：页脚的背景色。

文件名：.html文件名。（出于安全原因，无法更改文件扩展名。）
预览
版权所有2012，内森·皮尔西。版权所有。

尝试从

中删除

style=“display:none；”“

。

在Hristo的注释之外，尝试将id=“previewFrame”添加到iframe本身，然后更新getElementById以调用previewFrame

e、 g

及


函数previewFrame（）{
document.preview.submit（）；
var preview=document.getElementById（'previewFrame'）；
preview.style.display='block'；
}

或者使用JavaScript框架更容易地选择和显示元素。

iframe具有

style=“display:none；”“

…？哦，对了。。。我甚至没有注意到P谢谢！还是不行。。。我将在第一篇文章中为页面添加完整的代码。如果我运行您的确切代码，Firebug会说“document.preview”未定义（我想我以前应该看到过）。如果我注释掉那一行，iframe就会正确显示。因此，您需要表单上的选择器来提交它，因为文档不理解。preview应该是表单。奇怪。。。无论如何谢谢你的帮助！

<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>