When you have a user input box to promote to the frontend with plain JavaScript, attached via JSON-P or other approach serving JSON, there are few hints for appending.
For instance, we have a script tag that has to generate a dynamic content. We need to locate it somehow, two possible approaches are:
1) pulling the last loaded script, usually the one executed right at the moment:
[javascript]
var scripts = document.getElementsByTagName( ‘script’ );
var script_element = scripts[ scripts.length – 1 ]; [/javascript]
2) getting the script via ID
[javascript] var script_element = document.getElementById( script_id ); [/javascript]
In order to append an element there, we need to create it and fill the contents. For example, if we need to add an iframe, we should create the element and set it’s attributes:
[javascript]
var iframe = document.createElement(‘iframe’);
iframe.src = ‘http://example.org/source/framecontent.php’;
iframe.className = ‘samplecssclass’;
[/javascript]
Appending JavaScript content might be a bit trickier. How about adding some JS snippet right before and after the iframe and appending the three components at the DOM tree?
We need to dynamically fetch the data from the database or wherever is that needed, and pass it to JavaScript as JSON:
[php]
// fetch some data
…
$args = array();
// the content might have to be sanitized before that, unless you pull it from DB or other storage
$args[‘before’] = ‘<script type=”text/javascript”>some script evaluation here </script>’;
$args[‘after’] = ‘<script type=”text/javascript”>some script evaluation here </script>’;
// return the JSON-encoded result
echo json_encode( $args );
[/php]
Now, we have the scripts to be included, but we can’t append them directly to DOM. So we will create div elements and append them to the DOM tree and fill them with our scripts, just like that:
[javascript]
var before_iframe = document.createElement( ‘div’ );
before_iframe.innerHTML = json.before;
var after_iframe = document.createElement( ‘div’ );
after_iframe.innerHTML = json.after;
[/javascript]
Filling the DOM tree, reverse order to place them properly with insertBefore:
[javascript]
script_element.parentNode.insertBefore( after_iframe, script_element );
script_element.parentNode.insertBefore( iframe, after_iframe );
script_element.parentNode.insertBefore( before_iframe, iframe );
[/javascript]
Code is now in our HTML,but it’s placed as a simple text. No execution occurs of the script code. We need to trigger that manually by detecting script tags and executing all the code inside. Let’s add a function that does it for us:
[javascript]
function regex_matcher( content ) {
var re = /<scriptb[^>]*>([sS]*?)</script>/gm;
var match;
// match our content and execute it
while (match = re.exec( content ) ) {
eval( match[1] ); // eval is dirty, but sometimes needed
}
}
[/javascript]
And now call it with our scripts:
[javascript]
regex_matcher( json.before );
regex_matcher( json.after );
[/javascript]
