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？！？！
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest – SLaks
@SLaks你碰巧有跨浏览器的代码实现吗？我想通过错误步骤跳过试用版。 :) – StoneAgeCoder
XMLHttpRequest是跨浏览器，如果你想要处理所有浏览器的东西（包括旧版本的IE等），可以使用jQuery或其他一些为你处理这种抽象的框架。 – Busches