Develop Reference

Live reloading iframe script on change

I'm setting up some editors with HTML, CSS and JS code. The code of each of them is reloaded in an iframe when it's change. HTML and CSS code reloads perfectly, bus the JS code that is injected inside of a script in the body of the iframe is not working, possible because it's not rerunning once it's updated, but I don't know how to do it...
Any idea?
Here's an example in Plunker http://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2?p=preview
HTML
<div class="result">
<!-- RESULT -->
<style id="style"></style>
<script id="script"></script>
<script id="jQ" type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<iframe id="view" class="view"></iframe>
</div>
JS
var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {
var style = document.getElementById('style');
var script = document.getElementById('script');
var jQ = document.getElementById('jQ');
var view = document.getElementById('view');
var viewDocument = view.contentDocument || view.contentWindow.document;
var body = viewDocument.getElementsByTagName('body')[0];
var head = viewDocument.getElementsByTagName('head')[0];
var widgets = [];
var loadScript = document.createElement('script');
loadScript.innerHTML = "var $ = parent.$; console.log('loaded');";
$scope.html = '<div id="test">Testing</div>';
$scope.js = 'console.log("More test");';
head.appendChild(jQ);
head.appendChild(loadScript);
head.appendChild(style);
body.appendChild(script);
$scope.$watch('html', function(nv){
body.innerHTML = nv;
body.appendChild(script);
});
$scope.$watch('js', function(nv){
script.innerHTML = nv;
});});
Note: Code seems to run fine when is set by hand
SOLVED:
I found a way around. Here's the code in case someone else need it
setTimeout(updatePreview(codeHTML, codeCSS, codeJS), 300);
function updatePreview(codeHTML, codeCSS, codeJS) {
var view = document.getElementById('view');
var viewDocument = view.contentDocument || view.contentWindow.document;
var codeHTML = (codeHTML === undefined) ? '' : codeHTML;
var codeCSS = (codeCSS === undefined) ? '' : codeCSS;
var codeJS = (codeJS === undefined) ? '' : codeJS;
viewDocument.open();
viewDocument.write('<style type="text/css">' + codeCSS + '</style>');
viewDocument.write('<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>');
viewDocument.write(codeHTML);
viewDocument.write('<script type="text/javascript">' + codeJS + '</script>');
viewDocument.close();
}
This is called in $scope.$watch of de editors passing the updated value.

Weave: http://kodeweave.sourceforge.net/editor/#b6b39c95ec91f42950957a1ac8dc707f
I see you were able to solve your problem however I have a minor suggestion.
If a user uses setTimeout or setInterval like so...
setInterval((function() {
return $('body').css('background', newGradient())
}), 1000)
The problem you have in your code is it will add to the original literation and your setInterval function in this case will be added to the previous one.
Thus a good idea is to create the iframe dynamically and add the code within that. This way you have more control over what's being added to the iFrame and how to handle it.
document.querySelector(".preview").innerHTML = ""
var frame = document.createElement("iframe")
frame.setAttribute("id", "preview")
frame.setAttribute("sandbox", "allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts")
document.querySelector(".preview").appendChild(frame)

html/javascript - input/text to image on page load

I am new to HTML and javascripts. I hope someone can help me with my issue.
I am generating a code and passing the value to a textbox, then convert that value to a image. I need to execute the two function on page load is it possible? I hope someone can help. Thanks a lot!
Here is my code:
function SecurityCode() {
//Generate security code and assign to 'text'
document.getElementById('text').value = GeneratedCode;
}
function TexttoImage(){
// found this code here , thanks Stackoverflow!
var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
document.getElementById('text').addEventListener('onload', function (){
tCtx.canvas.width = tCtx.measureText(this.value).width;
tCtx.fillText(this.value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
console.log(imageElem.src);
}, false);
}
<body onload='TexttoImage();'>
<canvas id='textCanvas' width='65' height='42'></canvas>
<img id='image' width='65' height='42'>
<input type='text' id='text' >
</body>

You can make an init function who regroup all functions than you whan to charge on load
function SecurityCode() {
//Generate security code and assign to 'text'
document.getElementById('text').value = GeneratedCode;
}
function TexttoImage(){
// found this code here , thanks Stackoverflow!
var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
document.getElementById('text').addEventListener('onload', function (){
tCtx.canvas.width = tCtx.measureText(this.value).width;
tCtx.fillText(this.value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
console.log(imageElem.src);
}, false);
}
function initFormOnLoad(){
SecurityCode();
TexttoImage();
}
And in your form
<body onload='initFormOnLoad();'>
<canvas id='textCanvas' width='65' height='42'></canvas>
<img id='image' width='65' height='42'>
<input type='text' id='text' >
</body>

The onload attribute takes a string of JavaScript code, so you can simply put the two functions together!
onload="TexttoImage(); SecurityCode()"

You can try using jquery to ease your problem, you will need to include the below to your html page
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
HTML -
<body>
<canvas id='textCanvas' width='65' height='42'>
<img id='image' width='65' height='42' /></canvas>
<input type='text' id='text' />
</body>
javascript -
function SecurityCode() {
//Generate security code and assign to 'text'
document.getElementById('text').value = "hello1"; //GeneratedCode;
}
function TexttoImage() {
// found this code here , thanks Stackoverflow!
var tCtx = document.getElementById('textCanvas').getContext('2d');
imageElem = document.getElementById('image');
tCtx.canvas.width = tCtx.measureText(document.getElementById('text').value).width;
tCtx.fillText(document.getElementById('text').value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
}
$(function() { // nearly equivalent to body.onload but a better option to use
SecurityCode();
TexttoImage();
})
Have a look at jsfiddle for working code.

Javascript parser wont work anymore. Nothing happens when the submit button is clicked

I recently found this piece of javascript for a game that I play which basically makes my life easier in the game by doing some parsing. The script was working great when I first used it but then I stopped using it for a few weeks as I had less time to play the game and therefore use the script. I started again yesterday and suddenly, the script no longer worked and I couldnt parse the info that I needed. It no longer works when I click the submit button after the info is put into the text box.
Could anyone help me in finding out what is wrong and why it wont work anymore?
Here is the script and here it is on a website (incase what I posted below got messed up or whatever: www.cnparser.webs.com
<html>
<head>
<title>Recruitment Parser</title>
<script type="text/javascript">
window.onload = function()
{
var pageSource = document.getElementById('pgsource');
var submitButton = document.getElementById('submit');
var bbcodeBox = document.getElementById('nobb');
var outputArea = document.getElementById('output');
submitButton.onclick = function()
{
var cyberMessageLink = "http:\/\/www.cybernations.net/send_message.asp?Nation_ID=";
var cleanUp = pageSource.value.replace(/[^A-Za-z0-9 >]/g, "");
var rulerNames = cleanUp.match(/titleRuler[A-Za-z0-9_ ]{3,}(?=>)/gi);
var nationID = cleanUp.match(/ageaspNationID[0-9]{3,}/g);
if(bbcodeBox.checked)
{
for(var i=0; i<rulerNames.length; i++)
{
if(i%25==0)
{
outputArea.innerHTML+="[url="+cyberMessageLink+nationID[i].substring(14)+"]"+rulerNames[i].substring(11)+"[/url]" + "<br>";
continue;
}
outputArea.innerHTML+=rulerNames[i].substring(11) + "<br>";
if(i%24==0)outputArea.innerHTML+="<br>";
}
} else {
for(var i=0; i<rulerNames.length; i++)
{
if(i%25==0)outputArea.innerHTML+="<br>";
outputArea.innerHTML+=rulerNames[i].substring(11) + "<br>";
}
}
}
}
</script>
</head>
<body>
<table border="0">
<tr>
<td>
<textarea id="pgsource" cols="80" rows="20"></textarea><br/>
</td>
<td>
<b>Style</b><br>
<input id="nobb" type="checkbox">BBcode</input><br>
</td>
</tr>
</table>
<button id="submit">Submit</button><br><br>
<span id="output"></span>
<!-- --><script type="text/javascript" src="http://static.websimages.com/static/global/js/webs/usersites/escort.js"></script> <script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305- 2";_udn="none";_uff=false;urchinTracker();}</script></body>
</html>

From the linked site:
If this stops working email: gnomy#hushmail.com
Did you email Gnomy?

Pull value from table

Hello I have the following on a page and I would like to pull the value: 36424. the value will change thus Im trying to create a function that will pull it when i call on the function.
<table cellspacing="0" cellpadding="3" rules="cols" border="1"
id="OSDataCount" style="color:Black;background-color:White;border-
color:#999999;border-width:1px;border-style:Solid;border-collapse:collapse;">
<tr style="color:White;background-color:Black;font-weight:bold;">
<th scope="col">COUNT(*)</th>
</tr><tr>
<td>36424</td>
</tr>
</table>
cheers

No need for jQuery:
var table = document.getElementById('OSDataCount');
alert(table.rows[1].children[0].innerHTML); // -> 36424
See example →

Using jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
function alertval() {
var htmlval = $('#OSDataCount tr:eq(1)>td:first').html();
var textval = $('#OSDataCount tr:eq(1)>td:first').text();
alert("Val:" + val);
}
</script>
See http://api.jquery.com/text/, http://api.jquery.com/html/
Using raw JavaScript:
function alertval() {
var el = document.getElementById("OSDataCount");
alert("Val:" + el.rows[1].cells[0].innerHTML);
}

Adding a little detail to previous (correct) answers:
<script type="text/javascript">
window.onload = function() {
var table = document.getElementById('OSDataCount');
var number = table.rows[1].cells[0].innerHTML;
alert (number);
}
</script>

var value = document.evaluate('id(OSDataCount)/tr/td', document, null, XPathResult.NUMBER_TYPE);
going off a quick search/reach. Probably won't work, but worth a try.

Simple Javascript not working in IE, works in Firefox

The following is a simple piece of code to have javascript open up a soundcloud audio player in a pop-up window. It works perfectly in firefox and chrome, but doesn't work in IE7; it just shows a blank black screen. Does anyone know why?
I get the yellow drop down that says "to help protect.. IE has restricted this webpage from running scripts or ActiveX controls...." Even when I click on it and say allow, the soundcloud player still doesn't appear.
<HTML>
<HEAD>
<script type='text/javascript'>
function fetchArguments() {
var arg = window.location.href.split("?")[1].split("&"); // arguments
var len = arg.length; // length of arguments
var obj = {}; // object that maps argument id to argument value
var i; // iterator
var arr; // array
for (var i = 0; i < len; i++) {
arr = arg[i].split("="); // split the argument
obj[arr[0]] = arr[1]; // e.g. obj["song"] = "3"
}
return obj;
}
function loadTitle() {
var args = fetchArguments();
document.title = "Audio: Accidential Seabirds - " + args["name"];
}
function loadMusic() {
var args = fetchArguments();
var height = "100";
object = document.createElement("object");
object.height = height;
object.width = "100%";
nameParam = document.createElement("param");
nameParam.name="movie";
nameParam.value ="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F" + args["song"];
scriptParam = document.createElement("param");
scriptParam.name="allowscriptaccess";
scriptParam.value="always";
embedTag = document.createElement("embed");
embedTag.allowscriptaccess="always";
embedTag.height= height;
embedTag.src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F" + args["song"];
embedTag.type="application/x-shockwave-flash";
embedTag.width="100%";
object.appendChild(nameParam);
object.appendChild(scriptParam);
object.appendChild(embedTag);
document.getElementsByTagName("body")[0].appendChild(object); // we append the iframe to the document's body
window.innerHeight=100;
window.innerWidth=600;
self.focus();
}
</script>
<script type='text/javascript'>
loadTitle();
</script>
</HEAD>
<BODY bgcolor="#000000" topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
<center>
<script type='text/javascript'>
loadMusic();
</script>
</center>
</BODY>
</HTML>
The code to call this window might be
function PopupMusic(song, name) {
var ptr = window.open("musicplayer.htm?song="+song+"&name='"+name+"'", song, "resizable='false', HEIGHT=90,WIDTH=600");
if(ptr) ptr.focus();
return false;
}
Listen

I figured it out. You need to use the setAttributeFunction:
function loadVideo() {
var args = fetchArguments();
var videoFrame = document.createElement("iframe");
videoFrame.setAttribute('id', 'videoFrame');
videoFrame.setAttribute('title', 'YouTube video player');
videoFrame.setAttribute('class', 'youtube-player');
videoFrame.setAttribute('type', 'text/html');
videoFrame.setAttribute('width', args["width"]);
videoFrame.setAttribute('height', args["height"]);
videoFrame.setAttribute('src', 'http://www.youtube.com/embed/' + args["vid"]);
videoFrame.setAttribute('frameborder', '0');
videoFrame.allowFullScreen;
document.getElementsByTagName("body")[0].appendChild(videoFrame); // we append the iframe to the document's body
self.focus();
}

Following code works fine in IE/FF/Chrome:
<script type='text/javascript'>
var musicSrc = 'http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Frjchevalier%2Fjust-one-day-ft-deni-hlavinka&color=3b5998&auto_play=true&show_artwork=false';
document.write('<object type="application/x-shockwave-flash" width="100%" height="100%" data="'+musicSrc+'"><param name="movie" value="'+musicSrc+'" /></object>');
</script>