I am working with ruby on rails and I want to test some things out.
I have used this simple code to change the innerHTML of my body:
document.body.innerHTML = "Work will you?";
It doesn't bring any results.
I know my javascript file works correctly because i tested it with the: alert() function
When i put the document.body.innerHTML into my file it breaks the javascript (the alert no longer works)
Anybody knows whats could cause this??
You must be running your code from within the <head> tag. document.body doesn't exist at that point. You have to wait for the DOM to be ready. You can do that using something like jQuery's $(document).ready() http://jsfiddle.net/L83mL/
Credit to https://stackoverflow.com/users/1013842/david and https://stackoverflow.com/users/400654/kevin-b
Related
I am trying to add JS code to my HTML document. I am simply testing the functionality, so I am trying to create and display some text when an event occurs.
I seem to be missing some key component. Can anyone see what I am missing or if my html/js is causing the problem?
You have 2 mistakes.
In javascript, you defined it refresh() but called refesh() in the HTML.
In the refresh() function, you define div1 element but in the last line you append not exist element div
It appears that you have linked your javascript just fine.
However, your function, refresh(), was spelt wrong in your HTML,
You wrote refesh() in the HTML, and in your javascript, you called it refresh().
Totally understand, these problems are killer in the early days!
Cheers
I'm currently working on a web editor where you can enter your HTML, CSS and JavaScript code and see the result in real time. Something similar to JSBin or JSFiddle. (I'm doing that to get an offline editor)
I've already been through many problems especially when it comes to CSS but I solved them by using an iframe and injecting all my code into it. And that works amazingly well until you type some JavaScript.
I'm sending the code between <script></script> but unlike CSS it won't run. What's very weird is that when I enter something like $('button').css('color', 'red');, the buttons of the editor effectively get affected but not those of my iframe. Exactly the opposite of what I expected. I've tried many things, looked at many topics on the forum, but nothing works. I also tried to load a blank page in my iframe. In that case, JavaScript runs but it becomes impossible to edit the code in the iframe! What's going on? Where am I going wrong? Thank you in advance for your help!
Here's my editor : https://jsbin.com/tuqite/edit?html,js,output/
Try updating the content of the iframe like this.
// this string contains both html and script
var html_string= "content";
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string);
By directly updating the iframe DOM like the way you are doing may not be the right way .
First, check out my fiddle fiddle
jsFiddle is nice, but sometimes it runs a bit slow, so I made this simple pure JS fiddle (can be ran locally)
Working great so far, but I want to be able to use jQuery in my fiddle. Type alert(typeof $); in the bottom left box and press "Run" to see what I mean (says undefined).
So how do I pass jQuery off to the iframe and give it the correct context? I suspect I could set doc.contentWindow.$=$ or something like that, but I still need to give the correct context so it knows where to find the elements. How would I do that?
iframe.contentWindow.$ = $.proxy($,iframe.contentWindow);
That didn't work either. Gives me access to jQuery, but the context is still wrong.
iframe.contentWindow.$ = function(s){return $(s,doc);};
That sort of works... but it's a bit of a hack.
Why not do as jsfiddle itself does? It simply includes a script tag for jQuery (or whatever framework you asked for) in the head of the iframe.
If you look in head of the... uh "outer" iframe (the one jsfiddle created), you'll see they just threw this in there:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
Same thing applies to the "on ready" and "on load" options, jsfiddle just wraps the appropriate call around your javascript before injecting it into the iframe.
Modifying your code a little, you can create a script element:
var doc = iframe.contentWindow.document;
var jqueryTag = doc.createElement('script');
jqueryTag.type = 'text/javascript';
jqueryTag.src = 'http://code.jquery.com/jquery-1.6.4.js';
and then append that element to the head.
I tweaked your fiddle fiddle a little: http://jsfiddle.net/gilly3/XcSYz/3/
First, you can't write a doctype to the body's innerHTML and expect it to do anything for you. Same with a charset meta tag. I moved all of that to a document.write call.
You were evaluating script tags oninput of the editors. First this throws errors like crazy if you are editing a script tag in the html frame. Second, if you put an alert("hello") in a script tag in the HTML pane, then with every keypress, you get an alert. Third, you were evaluating the scripts in the context of the parent window. I changed html script tags to be evaluated when run is clicked and with the correct context.
Since you don't want to re-write the document every time (you can't, eg doctype), I modified it slightly to do some dom manipulation instead. It removes and replaces the style tag and writes only the HTML pane contents to the body's innerHTML.
This is a fun little project you are trying. jsFiddle is buggy and needs some updates. I don't know how viable your pure client-side fiddle is - jsFiddle is quite robust (despite its bugs), but it is a nice exercise to give your approach a try.
Edit: One more change included in this version: I modified your textareas to use width: 50%; height: 50%; instead of setting right and bottom. Those weren't working properly in IE or FF.
I would like to clear the entire head section once the page loads... actually, my goal would be to delete all JavaScript code held in the head section.
Is there some way to do something like this:
document.head.innerHTML = "";
Explanation:
I am using a Python script that uses Qt and webkit to take screenshots of websits.
It works on most sties, but there is one that it fails on. That site has a bunch of JavaScript code that it runs on timeouts. The WebKit webpage object allows me to execute JavaScript on the page. If there is some way to have the JavaScript remove all of the code form the head section I'd like to be able to try that for testing purposes to see if it resolves my screenshot script issue.
You can remove elements from the head, but it wont matter. The scripts have already run and removing the elements wont unload them or anything.
document.getElementsByTagName("head")[0].innerHTML = "";
// IE
var htmlEl = document.getElementsByTagName("html")[0];
htmlEl.removeChild(document.getElementsByTagName("head")[0])
var el = document.createElement("head");
htmlEl.appendChild(el);
To stop JavaScript scripts running by setTimeout, you should use clearTimeout, but for this case you should have a handler... But you're lucky, if they are defined as global variables.
Try using:
document.getElementsByTagName('head').innerHTML = "";
to clear the head. document.head does not exist so this may not work.
But you may want to try to disable the JavaScript using JavaScript like suggested by noah.
See http://www.manticmoo.com/articles/jeff/programming/javascript/removing-javascript-with-javascript.php for directions. It sounds crazy but evidently it works.
As noah said, simply removing the code from the head tag won't accomplish anything. You have to actually undo what the code is doing. For example, if it's using setTimeout() to set up the timeout code you're complaining about, you need to use clearTimeout() to disable it.
$('#id').empty();
Worked very well.
I'm trying to call a simple function with alert but it wont work when i try call the function (contained in an external js file) from my html page.
I have a import and the call is very simple. Any suggestions?
<head>
<script src="/js/jsFunctions.js" type="text/javascript"></script>
In my code I call
<a href="javascript:displayAlertText('someText');">
Inside the js I have some jquery followed by a function
function displayAlertText(someText)
{
alert('alert' + someText);
}
What you are doing looks like it should work. The problem is likely elsewhere.
Hrefs with "Javascript:" prefixes are really rather horrible. Instead, try rewriting that as:
<a href="#" onclick="displayAlertText('someText'); return false;">
Beyond that (which I don't think would actually be causing it), you've committed the cardinal sin of saying "It didn't work". Did you get any Javascript errors in the console? I suspect you would have, unless a valid function really was called.
Also, try calling the JS function explicitly from within a <script> block on your page, to see at what point it's failing.
Double-check as well that the external file really has been loaded at the time you click on the link - perhaps put a line at the bottom of the external script file to help check this, such as
alert('External file loaded.');
EDIT (based on comment): OK, so we've established you can call the method from "normal" JavaScript on your page. This means that the problem lies with the way that you're trying to call the script from your hyperlink.
Have you passed your HTML through a validator? If the syntax is invalid, then user agents can interpret it however they want, including ignoring it completely.
If the HTML does validate then at this point it might be useful to post a link to your full HTML, so that others can look over it and see where the problem lies. It's possibly something like another function overriding the onclick event for the link, and so your event handler gets lost.
In pure jQuery you would do this like:
$(document).ready(function(){
$('a').click(function(){
alert('here');
})
})
try this instead...
<a href="#" onclick="displayAlertText('someText');">
If that does not help, I would start making sure that your javascript file is loading correctly and doesn't contains some simple syntax error somewhere. View your page with Firebug on in Firefox and look for warnings and errors.
You mentioned jQuery. Is the function standalone or inside a jQuery object (i.e. wrapped inside another function)? This makes difference.
Apart from this problem, the way you invoke the function isn't clean. Move it to the onclick attribute or better make use of jQuery.