2014-01-06 24 views
1

嗨我正在嘗試使個人代碼操場......我使用代碼鏡像變成看起來像一個IDE(我也打算稍後添加IDE的功能,但...)。我當前的代碼基本上是..PHP沒有在iFrame中運行

HTML(的index.html)

<html> 
<head> 
    <link href="main.css" rel="stylesheet" type="text/css" /> 
    <script src="http://codemirror.net/lib/codemirror.js"></script> 
    <link href="http://codemirror.net/lib/codemirror.css" rel="stylesheet" /> 
    <script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script> 
    <script src="http://codemirror.net/mode/css/css.js"></script> 
    <script src="http://codemirror.net/mode/javascript/javascript.js"></script> 
</head> 
<body> 
<div class="codewindow"> 
     <form id="codePush" action="codePush.php" method="POST" target="codeResults"> 
      <textarea id="htmlWindow"></textarea> 
      <textarea id="cssWindow"></textarea> 
      <textarea id="jsWindow"></textarea> 
      <input type="submit" /> 
     </form> 
     <script class="code"> 
      var htmlCodeMirror = CodeMirror(function(elt) { 
       htmlWindow.parentNode.replaceChild(elt, htmlWindow); 
       }, {value: "<!-- HTML goes here -->", 
        lineNumbers: true, 
        mode: "text"}); 
     </script> 
     <script class="code"> 
      var cssCodeMirror = CodeMirror(function(elt) { 
       cssWindow.parentNode.replaceChild(elt, cssWindow); 
       }, {value: "/* CSS goes here. */", 
        lineNumbers: true, 
        mode: "css"}); 
     </script> 
     <script class="code"> 
      var jsCodeMirror = CodeMirror(function(elt) { 
       jsWindow.parentNode.replaceChild(elt, jsWindow); 
       }, {value: "// JavaScript goes here.", 
        lineNumbers: true, 
        mode: "javascript"}); 
     </script> 
    </div> 
    <div class="output"> 
     <iframe id="codeResults" name="codeResults" target="codePush.php" width="100%" height="100%" frameBorder="0.5" scrolling="yes"></iframe> 
    </div> 
</body> 

PHP(codePush.php)

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     <?php 
     echo $_GET['cssWindow']; 
     ?> 
    </style> 
    <script type="text/javascript"> 
     <?php 
     echo $_GET['jsWindow']; 
     ?> 
    </script> 
</head> 
<body> 
    <?php 
    echo $_GET['htmlWindow']; 
    ?> 
</body> 
</html> 

我已經確定的鏈接的iFrame因爲在按下提交按鈕時會在正文部分的PHP文件中添加文本。

我希望我已經說得很清楚,並希望得到任何幫助...... 僅供參考我有點小白,當談到PHP

+1

**如何**不工作?請注意,html中的'id'不會創建匹配的javascript對象。你沒有在你的JS代碼中的任何地方定義'htmlWindow','cssWindow'等等,所以幾乎可以肯定的是,如果你檢查你的javascript控制檯,你將會遇到未定義的對象錯誤。 –

+0

iframe幾乎總是一個壞主意。 – 2014-01-06 20:30:08

+0

PHP在服務器上運行,它不關心輸出的顯示位置。 – Barmar

回答

0

我不entriely知道你」再努力實現與所有你所提供的代碼,但這裏的一個簡化版本,將修復代碼的主要問題codePush.php不處理:

<div class="codewindow"> 
<form id="codePush" action="codePush.php" method="POST" target="codeResults"> 
    HTML:<textarea id="htmlWindow" name="htmlWindow"></textarea> 
    CSS:<textarea id="cssWindow" name="cssWindow"></textarea> 
    JS:<textarea id="jsWindow" name="jsWindow"></textarea> 
    <input type="submit" /> 
</form> 
</div> 
<div class="output"> 
    <iframe id="codeResults" name="codeResults" target="codePush.php" width="100%" height="100%" frameBorder="0.5" scrolling="yes"></iframe> 
</div> 

CodePush.php

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      <?php 
      echo $_POST['cssWindow']; 
      ?> 
     </style> 
     <script type="text/javascript"> 
     <?php 
      echo $_POST['jsWindow']; 
     ?> 
     </script> 
    </head> 
    <body> 
     <?php 
     echo $_POST['htmlWindow']; 
     ?> 
    </body> 
</html> 

請注意CodePush.php使用'POST'而不是'GET',以便它與您的表單一致。你也錯過了textareas上的'name'屬性,這是在帖子中使用的(不是ID)。 你可能要考慮加入一些檢查,如果這些字段不完整,以避免錯誤等