2014-07-16 89 views
0

首先要說清楚。我想在不使用jQuery的情況下做到這一點,換句話說,是的,我想重新發明輪子以瞭解輪子的工作原理。據我的理解,這可能通過AJAX,但網絡似乎只提供jQuery解決方案的問題。我的目標是使用javascript生成html文檔,但是在頁面已經通過javascript將僅輸出文檔outerHTML的非腳本存根輸出到僅包含指定文本的新.php文件之後。PHP to Javascript通過AJAX/XML變量

的index.php

<!DOCTYPE html> 

<?php 
    include 'devScript.php'; 

    $div = new Div(); 
    $div->setBounds(0, 0, 100, 100); 
?> 

devScript.php

<script type="text/javascript"> 

    var srcScript; 
    var devScript; 
    var stubScript; 

    (function() { 

     document.documentElement.appendChild(document.createElement('body')); 

     srcScript = document.head.innerHTML; 



    }()); 


    window.onload = function() { 



     devScript = document.head.innerHTML.toString().replace(srcScript, ''); 
     document.documentElement.removeChild(document.documentElement.lastChild); 

     stubScript = document.documentElement.outerHTML.toString().replace(srcScript, '').replace(devScript, ''); 

     alert("Full Script!"); 
     alert(document.documentElement.outerHTML); 
     alert('Stub Script'); 
     alert(stubScript); 

<?php 
/* 
    $file = fopen("iHateWritingHtmlTags.php", 'w'); 
    fwrite($file, stubScript); 

    This DOES NOT WORK!!!! 
*/ 
?> 


    } 

    function Div() { 

     Div.STATIC = 'static'; 
     Div.ABSOLUTE = 'absolute'; 
     Div.RELATIVE = 'relative'; 
     Div.FIXED = 'fixed'; 
     Div.SOLID = 'solid'; 
     Div.DOTTED = 'dotted'; 
     Div.LEFT = 0; 
     Div.CENTER = 1; 
     Div.RIGHT = 2; 
     Div.TOP = 0; 
     Div.MIDDLE = 1; 
     Div.BOTTOM = 2; 

     var ELEMENT; 
     var CSS; 

     var horizontalAlign; 
     var verticalAlign; 

     var colorQueue; 



     (function() { 

      this.div = document.createElement('div'); 

      ELEMENT = this.div; 
      CSS = this.div.style; 

      CSS.border = '1px solid black'; 



      document.body.appendChild(this.div); 



     }()); 

     this.setPosition = function(postype) { 

      if (!horizontalAlign && !verticalAlign) { 

       CSS.position = postype; 

      } 


     } 

     this.setBounds = function(x, y, width, height) { 

      CSS.left = x + 'px'; 
      CSS.top = y + 'px'; 
      CSS.width = width + 'px'; 
      CSS.height = height + 'px'; 

     } 

     this.setColorQueue = function(r, g, b) { 

      colorQueue = 'rgb(' + new Array(r, g, b) + ')'; 
      alert(colorQueue); 

     } 

     this.horizontalAlign = function(horiz) { 

      var freeSpaceX = ((window.innerWidth - ELEMENT.offsetWidth)/2); 
      var defPadding = '8px'; 
      var defPaddingCenter; 
      var defPaddingRight; 
      var defPaddingLeft; 

      horizontalAlign = true; 

      this.setBounds(0, 0, 100, 100); 

      if (CSS.position == 'relative' || CSS.position == 'absolute') { 

       CSS.position = 'absolute'; 
       defPaddingCenter = 12; 
       defPaddingRight = 4; 
       defPaddingLeft = 8; 



      } else if (CSS.position == 'fixed') { 

       defPaddingCenter = 4; 
       defPaddingRight = 4; 
       defPaddingLeft = 8; 

      } 

      if (horiz == 0) { 

       if (!verticalAlign) { 
        CSS.marginTop = defPadding; 
       } 
       CSS.marginLeft = defPaddingLeft + 'px'; 

      } else if (horiz == 1) { 

       if (!verticalAlign) { 
        CSS.marginTop = defPadding; 
       } 
       CSS.marginLeft = freeSpaceX - defPaddingCenter + 'px'; 

      } else if (horiz == 2) { 

       if (!verticalAlign) { 
        CSS.marginTop = defPadding; 
       } 
       CSS.marginLeft = (freeSpaceX - defPaddingRight) * 2 + 'px'; 

      } 

     } 

    } 


</script> 
<?php 

class Div { 

    public $obj_id; 

    function __construct() { 

     $this->obj_id = "_" . uniqid(rand()); 

     echo '<script>', 
     'var ' . $this->obj_id . ' = new Div();', 
     '</script>'; 
    } 

    function setPosition() { 

     echo '<script>', 
     $this->obj_id . '.setPosition();', 
     '</script>'; 
    } 

    function setBounds($x, $y, $width, $height) { 


     $parse_string = $x . ',' . $y . ',' . $width . ',' . $height; 


     echo '<script>', 
     $this->obj_id . '.setBounds(' . $parse_string . ');', 
     '</script>'; 
    } 

    function setColorQueue() { 

     echo '<script>', 
     $this->obj_id . '.setColorQueue();', 
     '</script>'; 
    } 

    function horizontalAlign() { 

     echo '<script>', 
     $this->obj_id . '.horizontalAlign();', 
     '</script>'; 
    } 

} 
?> 

注:問題的根源是在index.php中。隨意在Firefox上測試這兩個,因爲警報框有一個滾動條。 :)

OUTPUT: iHateWritingHtmlTags.php只包含 「stubScript」 作爲其文本而不是實際的javascript變量stubScript?!?!

+2

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest – SLaks

+0

@SLaks你碰巧有跨瀏覽器的代碼實現嗎?我想通過錯誤步驟跳過試用版。 :) – StoneAgeCoder

+0

XMLHttpRequest是跨瀏覽器,如果你想要處理所有瀏覽器的東西(包括舊版本的IE等),可以使用jQuery或其他一些爲你處理這種抽象的框架。 – Busches

回答

0

讓 「變量」 是的Javascript變量名稱現在

<form action="." method="get"> 

<input type='hidden' name='Javascript_Variable' value='<script>document.write(variable);</script>'> 

</form> 

,在PHP中:

<?php 

$phpVariable = $_GET['Javascript_Variable']; 

?> 
+0

這是很好的存儲一個PHP變量到JavaScript,但我需要反之亦然。 – StoneAgeCoder

+0

然後你可以通過創建一個隱藏的輸入類型來保留這個過程,該隱藏的輸入類型的值是javascript變量的值,然後通過獲取$ _GET ['隱藏輸入的名稱]的值來獲取PHP變量] – user2938543

+0

你請介意以您建議的方式編輯您的答案。 – StoneAgeCoder