首先要說清楚。我想在不使用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?!?!
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest – SLaks
@SLaks你碰巧有跨瀏覽器的代碼實現嗎?我想通過錯誤步驟跳過試用版。 :) – StoneAgeCoder
XMLHttpRequest是跨瀏覽器,如果你想要處理所有瀏覽器的東西(包括舊版本的IE等),可以使用jQuery或其他一些爲你處理這種抽象的框架。 – Busches