First to make it clear. I want to do this without using jQuery, in other words, yes I want to re-invent the wheel to understand how the wheel works. To my understanding this is possible via AJAX, but the net seems to only provide jQuery solutions to the problem. My goal is to generate an html document using javascript, but in turn after the page has loaded output only the non-script stub of the documents outerHTML via javascript to a new .php file which contains only the specified text.
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>';
}
}
?>
NOTE: The Root of the problem is in index.php. Feel free to test these two out on firefox because the alert box has a scroll bar. :)
OUTPUT: iHateWritingHtmlTags.php only contains "stubScript" as its text not the actual javascript variable stubScript?!?!
