个人中心
gpt4 book ai didi

javascript - 使用 JavaScript 显示隐藏的 div

转载 作者：太空宇宙 更新时间：2023-11-04 05:11:53 24 4
gpt4 key购买 nike

我有下面的代码...

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

24 4 0
文章推荐： c - 原始类型声明在 C 中如何工作？
文章推荐： linux - 如何在 Bash 中将字符串格式日期 yyyymmddThhmmss.sss 转换为日期？
文章推荐： 可执行文件中的C语言变量
文章推荐： python - 写多行的有效方法？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com