How does Javascript work in the browser address bar?
To be more specific: how can I make a script that goes to a web site and clicks a button on that site? Not maliciously, of course, I'd like to be able to do this for personal use.
You want to make a bookmarklet.
JavaScript in the address bar is evaluated just like any JavaScript.
On your second point, you don't. That's called cross site scripting or XSS. You can't have JavaScript from one site modify another site.
You could potentially write an extension to your web browser that will accomplish what you want.
View the source code of the page and find the reference to the button you'd like to click. You're looking for something like this:
<input type="submit" value="Click Here" id="theButtonId"/>
Then you can type in the address bar:
javascript:document.getElementById("theButtonId").click();
To navigate to a website, do this:
javascript:window.location='http://www.google.com';
What you are talking about is called a "bookmarklet", and depending on exactly what you are talking about, you could probably accomplish it via a bookmarklet... but it may be more trouble than it's worth.
Bookmarklets are generally used to make simple modifications on the page you are currently viewing. For example, a book-marklet may hide all the pictures on a page.
You can write bookmarklets that interact with another page, for a complex example see the jQUeryUI boomarklet: here
However, generally the type of thing you are talking about would be accomplished via something like a Grease Monkey/User Script and/or "extension". I would recommend going that route instead.
Related
I had a java script code in asp.net ,It's works fine in all browser but when javascript is disabled in browser the script is not working ,so can anyone suggest me where to write the code
so can anyone suggest me where to write the code
You don't have much choices left other than doing it on the server. Of course there are some levels of interaction that are possible only to be made with javascript. For example things like AJAX calls, subscription to events in DOM elements like onchange, ... If the user disables javascript your site will become less dynamic, that's for sure.
If you absolutely need to use javascript you could tell the user that your site requires it in order to work properly.
unfortunately there is no way around it...if javascript is disabled...then give users a message to turn it back on.
You could alert the user using the noscript-tag that he or she should turn it javascript back on
<noscript>
Javascript is disabled
</noscript>
I have a quick question. I want to create a small Scheduler widget to put on my clients websites. So if I need to make a global change to the form, I would just have to do it once.
The form will have to be unique to the website because I need to know which e-mail address to send the form to once it is submitted.
I was thinking of an iFrame I could use like this:
<iframe src="http://www.domain.com/scheduler/shop-name/"></iframe>
But I don't think that would be the best method, and I wouldn't want someone directly going to that URL.
Another option is something like this:
<script type="text/javascript">
shop_id = '114000300';
</script>
<script src="http://www.domain.com/js.widget" type="text/javascript"></script>
I'm not too sure how to execute that option yet, I'm not that experienced with Javascript but what do you guys think? What are the pros and cons of the iFrame vs Javascript?
Just wondering what the best option is, and if anyone has some tips on how to get started and any security issues I need to look out for.
Thanks!
An <iframe>
Cannot communicate its size to the parent window without additional work, which limits resizing.
Provides better isolation, as you cannot access anything on the parent page. This may be a plus from your customer's perspective.
Could be written in pure HTML, no Javascript experience necessarily required.
Has its own independent CSS styles.
Works for users who have scripting disabled.
A script
Allows you full access to the parent page
Will slow page load, as the browser will load your script before rendering the rest of the page. (At least as you have shown there, there are ways around this.)
Obviously requires some experience with Javascript.
Must share styles with the parent page. This could cause compatibility problems if your client's page uses broad-scoped style rules, such as rules for * or div.
Few more points in addition to #Dark Falcon's answer,
You have more control on the design in case of an iframe. In case of javascript widget, the client's styling might conflict with the widget's styling.
iframe is better in terms of security (cookies stored are different).
Making a JavaScript widget needs more care and expertise as you need to ensure that the other JavaScript doesn't conflict yours'. (global vars etc...)
You can use a JavaScript that writes an iframe dynamically if you want to avoid someone from going directly to the URL.
My webapp uses both Rails and JS and I would like users to be able to embed the images they upload to any blog/site.
What do I need to know, from a development point-of-view to allow me to create the functionality that generates an 'embed' link. It can be either a link like YouTube does, or a JS snippet or anything.
Just want to get a high-level overview of what I need to be able to do and how to proceed.
Thanks.
I would try using iframe. I created a widget which used javascript and I put it all into a single html file hosted on my website. Then I gave away an iframe snippet like this for example...
<iframe src="http://mywesbite.com/myWidget.html"></iframe>
The user can simply place the iframe snippet into their website and that's it!
I'm a little bit late to the party here, but I just wanted to add to Jacob's answer.
You can easily allow the user to customize the embedded content (perhaps choose light on dark vs. dark on light text to more closely match the page's environment/design) by using query params within the iframe src:
<iframe src="http://___.com/widget?theme=light&size=large"></iframe>
of course you'd probably want to build a UI to allow the user to make these distinct changes... you can't expect average user's to do that by hand:)
Vimeo's UI for customizing embedded videos is pretty nice if you want a best case scenario.
My site heavily depends upon Javascript and if I turn it off my website looks real ugly.
I want to force the user to use Javascript by show him a notification to turn it on, else prompt him that site can't be viewed.
What do I do to achieve this?
Have a look here:
noscript tag
All you can do is test that javascript is turned on or not, and show a notification that the site is best viewed with javascript turned on.
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>
Your browser does not support JavaScript!
</noscript>
Also, feel free to google 'html script tag' and see http://www.w3schools.com/tags/tag_noscript.asp
First off, be warned that forcing the user to do anything is usually considered quite rude. Lots of people keep javascript either disabled entirely or severely restricted precisely because some twerp wanted to use it to force them to do something or look at something.
With that said, you can include some text in <noscript></noscript> tags. That text will only show if the browser doesn't have javascript, or has it disabled.
For your question:
By default show the notification, and with JS + some sort of document/DOM Ready event just remove the notification. Try not to do this on window/onload because then you'll see the notification until ALL resources of that page have been loaded, which takes longer than dom ready. That way, everybody who doesn't have JS will see the message.
But ideally you'd just want to have a website that works with, or without javascript. Maybe unobtrusive javascript is a nice search term for you.
I watched an interesting talk by John Resig (The creator of JQuery) and he even mentions in his video, do not rely on Javascript.
You create a landing page that uses a <noscript> tag to inform the user that your web site doesn't work without Javascript. Then you go and pray $DEITY for forgiveness because you added to the general mire pool that is the web.
Okay i know that it's important for your website to work fine with javascript disabled.
In my opinion one way to start thinking about how to design such websites is to detect javascript at the homepage and if it's not enabled redirect to another version of website that does not javascript code and works with pure html (like gmail)
Another method that i have in mind is that for example think of a X (close button) on a dialog box on a webpage. What if pressing the X without any javascript interference lead to sending a request to the server and in the server side we hide that dialog next time we are rendering the page, And also we bind a javascript function to onclick of the link and in case of the javascript enabled it will hide the dialog instantly.
What do you think of this? How would you design a website to support both?
One way to deal with this is to :
First, create the site, without any javascript
Then, when every works, add javascript enhancements where suitable
This way, if JS is disabled, the "first" version of the site still works.
You can do exactly the same with CSS, naturally -- there is even one "CSS Naked Day" each day, showing what websites look like without CSS ^^
One example ?
You have a standard HTML form, that POSTs data to your server when submitted, and the re-creation of the page by the server displays a message like "thanks for subscriving"
You then add some JS + Ajax stuff : instead of reloading the whole page while submitting the form, you do an Ajax request, that only send the data ; and, in return, it displays "thanks for subscribing" without reloading the page
In this case, if javascript is disabled, the first "standard" way of doing things still works.
This is (part of) what is called Progressive enhancement
The usual method is what's called progressive enhancement.
Basically you take a simple HTML website, with regular forms.
The next enhancement is CSS - you make it look good.
Then you can enhance it further with Javascript - you can add or remove elements, add effects and so on.
The basic HTML is always there for old browsers (or those with script blockers, for example).
For example a form to post a comment might look like this:
<form action="post-comment.php" method="post" id="myForm">
<input type="text" name="comment">
</form>
Then you can enhance it with javascript to make it AJAXy
$('#myForm').submit(...);
Ideally the AJAX callback should use the same code as post-comment.php - either by calling the same file or via include, then you don't have to duplicate code.
In terms, it is not important to make your site work with JavaScript disabled. People who disable JavaScript are people who want to hack bugs into your site, they don't deserve to navigate it correctly. Don't waste your efforts with them. Everybody know the Web is unsurfable without JavaScript.
The only thing you have to be careful is about your forms: Don't ever trust filters in JavaScript, Always filter it again on server-side, ALWAYS!
Use Progressive Enhancement, study jquery to understand it. It takes some time till you get your head around it. For example your idea:
to detect javascript at the homepage
and if it's not enabled redirect to
another version of website that does
not javascript code and works with
pure html
how would you detect if javascript is disabled? not with javascript, obivously...
you're thinking the wrong way round: the most basic version has to be the default version, and then, if you detect more advanced capabilities, you can use them.
Try to avoid separate versions for different bowsers/capabilities for as long as you can. It's so much work to keep all versions in sync and up-do-date.
Some good ressources to get you started:
Understanding Progressive Enhancement
Progressive Enhancement with JavaScript
Test-Driven Progressive Enhancement
The best way is to design a page that works adequately without JS. Then add a <script> block at the bottom of the <body> section with code like this:
window.onload = function() {
// Do DOM manipulations to add JS functionality here. For instance...
document.getElementById('someInputField').onchange = function() {
// Do stuff here that you can't do in HTML, like on-the-fly validation
}
}
Study the jQuery examples. They show lots of things like this. This is called "unobtrusive JavaScript". Google for that to find more examples.
EDIT: The jQuery version of the above is:
$(document).ready(function() {
// Do DOM manipulations to add JS functionality here. For instance...
$('#someInputField').change(function() {
// Do stuff here that you can't do in HTML, like on-the-fly validation
});
});
I added this just to show the lower verbosity of jQuery vs. standard DOM manipulation. There is a minor difference between window.onload and document.ready, discussed in the jQuery docs and tutorials.
What you're aiming for is progressive enhancement. I'd go about this by first designing the site without the JavaScript and, once it works, start adding your JavaScript events via a library such as jQuery so that the behaviour of the site is completely separate from the presentation. This way you can provide a higher level of functionality and polish for those who have JavaScript enabled in their browsers and those who don't.