I would like to implement a simple Javascript Playground like jsFiddle and was wondering on the best way to achieve this. From the way jsfiddle works, it creates an iframe with the submitted HTML/Javascript code. The source of the iframe comes from a dynamically created page from the jsfiddle server.
I was wondering if it would be possible to do this with client side javascript code only. I have tried this but does not work (custom code is not executed and do not know if jquery is loaded in the iframe):
$iframe = $(document.createElement("iframe"))
$html = $iframe.contents().find("html")
//HTML code
$html.children("body").append($(htmlcode))
//Javascript code (first jquery and then custom code)
$script = $(document.createElement("script"))
$script.attr("src","jquery.js")
$html.children("head").append($script)
$script = $(document.createElement("script"))
$script.html(javascriptcode)
$html.children("head").append($script)
$iframe.appendTo($("body"));
You don't have to be that complex.
Just open a new window (or an iframe) and put your HTML inside it.
Demo: http://jsfiddle.net/DerekL/uSrU6/4 (UPDATED)
also I'm not completely sure I understand what exactly are you trying to do. I think you have a mistake in the code you posted:
You are trying to append the script to $html.children('head') while $html is not the $iframe itself but the contents.. I think contents() doesn't return a DOM element so the rest after that isn't valid anyway. edit - now I see in the comments that regular js does work for you so this probably ain't the problem
I vaguely remember there is an issue with cross site scripting when calling js libs from another domain in an iframe. Not sure about that
EDIT: Found it: here maybe this is the issue. There is also a solution here
Related
When we had done security audit of our project, we got broken Link "/a" vulnerability.
After searching for link throughout project we found link in JQuery-1.9.js java-script file that we are using in our project.
small part of code in that JQuery-1.9.js -
// Make sure that URLs aren't manipulated
// (IE normalizes it by default)
hrefNormalized: a.getAttribute("href") === "/a",
As per my understanding this code part helps for making it(JQuery) compatible with IE 6/7/8.
hrefNormalized is used to check that anchor tag is giving href value as full URL or exact href , which is issue in IE version.
The better explanation of this part is given in
https://www.inkling.com/read/jquery-cookbook-cody-lindley-1st/chapter-4/recipe-4-1
I want to remove this vulnerability but i don't want to remove or change code in JQuery js file.
So, My question is why did not JQuery designers used "/#" instead of "/a" .What is the problem of using "/#" in that code.
Earlier same question is asked by someone to JQuery Team,but they told that it not the problem from Jquery.
For reference of that ticket
http://bugs.jquery.com/ticket/10149
Help me to solve Or Is there another solution?
Thank you
This is not a vulnerability but a false positive. The security scanner interprets the "/a" string as a link, which it is not.
Even if jQuery creates the link in the DOM, it's not clickable or visible to the user. Your website does not actually have a real link to /a anywhere.
I would ignore the problem without changing anything.
Maybe, if you want this hrefNormalized: a.getAttribute("href") === "/a", to be transformed into this hrefNormalized: a.getAttribute("href") === "/#", but you don't want to touch the jQuery file.
Put that second one in a script in a an order so that the browser reads your script after reading the jQuery file, so it mashes.
Anyway, I never had issues with jQuery before, check your code first.
If you don't want to have your views with scripts, put it in a js file and link this file to your view after the jQuery file.
Hope it helped you, or at least gave you some ideas to solve your problem. Good luck, let us know how it goes! ;)
EDIT:
<script src="~/JQuery/jquery-2.0.3.js"></script>
<script src="~/Scripts/Fix.js"></script>
If you do something like this, the browser reads first the jQuery, then it reads the Fix.js. Inside the Fix.js, you put the function or paramater you want to change from the jQuery.
So the Browser will get the latest one it reads if they are equal.
For example:
function whatever (){ //This in jQuery file
//things #1
}
function whatever (){ //This in Fix file
//Different things #2
}
This way the browser chooses the Fix.js one, because was the last he read.
I have a little problem with opening links because I was using script
getURL("javascript: $(function(){$('#SCT_InnerContent').load('"+_root.linksDB[id][2]+"?lang=en');});");
in flash but it works only in Google Chrome.
Can anyone help me with reworking this script to run under other browsers as well?
Thanks in advance
Why not put the jQuery into a JavaScript function in the page, and then call that using ExternalInterface? This is the most robust way of communicating with browser JavaScript from within Flash.
Something like this in the page:
<script language="JavaScript">
function handleFlashCall(arg){
$(function(){$('#SCT_InnerContent').load('"+ arg +"?lang=en');});
}
</script>
And then, from within Flash:
ExternalInterface.call("handleFlashCall", _root.linksDB[id][2]);
See the explanation here:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf626ae-7fe8.html#WS2db454920e96a9e51e63e3d11c0bf69084-7f31
And reference docs here:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html#call%28%29
Make sure you have allowScriptAccess flashvar parameter available and set to "always". Take a look at the wrapper html to set it.
Take a look at this documentation on the subject.
I have two applications where users can submit HTML pages. I would like to make sure that no scripts are included in the HTML.
Normally you would escape content to get rid of scripts, but as this is HTML I can't do that. Anyone with good suggestions on how to do that? The applications are written in both C# and Java
OWASP has a project to scrub html and css
The first thing I'd do is see if there is a <script> tag in the HTML. That solves the first issue, then you have to make sure there are no inline onmouseover/onclick etc. events. You could maybe use a DOM Parser to go over all elements and remove all attributes that start with 'on'.
I have little to no experience in both C# as Java, so am unaware of any "easier" solutions that area already available. But maybe someone else here has a better idea for that.
ok so here's my problem...
i've been following this tutorial ( http://www.alistapart.com/articles/dropdowns )
to make a css drop down menu with my wordpress blog. everything works fine... except in IE6.
now i know this is normal, and in the link i posted above there is a fix of this which makes use of DOM based scripting... is this java script?
the main question i have is.. where do i paste this code into? css, html, make a new file?
i'm new to any form of javascript.. it's boggling me a bit..
any help would be great!
Thanks!
yours truly
noobie
Yes, it is JavaScript.
As such, you can place it in a <script> block, preferrably inside <head>. (It assigns itself to window.onload, so the code will be executed at onload, no matter where in the page you put the code)
the main question i have is.. where do i paste this code into? css, html, make a new file?
I suggest you take a look at the source of this sample page:
http://www.htmldog.com/articles/suckerfish/bones/. It shows the bare details of how it's implemented.
i'm new to any form of javascript.. it's boggling me a bit..
I would like to suggest you read this nice tutorial which already helped out numerous developers during the years: w3schools.com/js.
Grz, Kris.
I was wondering if it was possible to get Javascript to write some HTML onto the page in a certain DIV.
This is due to the fact, there are certain areas of the site where i don't have access to the markup. But i would like to add a small section there.
For example the container i want to add some html to is
<div id="topics"></div>
Is it possible to get Javascript to do this
<*div id="topics"> <div id="mysection"> </div> <*/div>
Many thanks!
This is fairly simple to do, even using plain JavaScript.
var topicsDiv = document.getElementById("topics");
topicsDiv.innerHTML = '<div id="mysection"> </div>';
If you're going to be doing some serious DOM (Document Object Model, i.e. HTML structure) manipulation, however, then I would recommend you look into using the JQuery library. Yet if the task is limited to your question, then normal JavaScript should be fine, as shown above.
With simple Javascript (without JQuery or something you could do):
HTML:
<div id="topics"></div>
JS:
document.getElementById('topics').innerHTML = '<div id="mysection"></div>';
Using JQuery you would simply do:
$('#topics').append('<div id="mysection"></div>');
Of course. For example, you can do this using Prototype:
$('topics').update('<div id="mysection"></div>');
The syntax is quite similar for jQuery or another frameworks, and as Noldorin noted, you can do also this without any framework.
You are probably looking for the innerHTML property
document.getElementById('topics').innerHTML = 'whatever';
I agree with both Noldorin and Can Berk Güder and others, and I'd like to quote that this is DOM (Document Object Model) and one of the main components of AJAX.
AJAX send a request to a server, and uses techniques such as this to "put it" in the page.
Know that you can do almost anything with javascript; you could just have "<html><body></body></html>" and have javascript do ALL the rest. This is what GWT does, and if you need to HEAVILY modify you page dynamically, you may be interested in it.