2012-02-04 49 views
0

一個隱藏的div我有下面的代碼吧...顯示用JavaScript

<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

iframe has'style =「display:none;」'...? – Hristo 2012-02-04 01:32:35

+0

哦,對......我什至沒有注意到。 :P 謝謝! – 2012-02-04 01:34:38

回答

0

嘗試從刪除style="display: none;" ...?

2

取消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框架更容易地選擇和表演元素。

+0

仍然無效......我將在第一篇文章中添加頁面的完整代碼。 – 2012-02-04 01:42:36

+0

如果我運行你的確切代碼,Firebug說「document.preview」是未定義的(我想我應該在之前看到過)。如果我註釋掉該行,則iframe會正確顯示。 – 2012-02-04 02:22:35

+0

所以你需要在表單上有一個選擇器來提交它,因爲文檔不理解「.preview」應該是表單。 – 2012-02-04 02:24:08