I have just read some concept about window.location property and method.
And I know that
1. window.location.href = "http://google.com"
2. window.location.assign("http://google.com")
3. window.location.replace("http://google.com")
are all can redirect our page to the target url, the only difference is that window.location.replace doesn't record the history, so we cannot get back to the previous page directly.
Now I just wondering, what's is the difference between window.location.href and Google, the <a> tag also records the history.
And for what situation do we use them respectively?
I think the main difference is what's happening behind the scene but on the surface they are pretty much giving the same effect.
window.location.href is only triggerable by JavaScript, or in JS context. Whereas a <a> tag defines hyperlink in HTML. It really depends on how you want to trigger this new page. You can either have a hyperlink a user can click/tap on, or you can trigger the page load by some JS functions that are triggered by certain actions.
To be more specific, a tag is common in webpages because browsers understand it and can apply CSS style to it to look nicer. As for window.location.href, there's no UI aspect for it, it simply is a line of JS code that you can trigger to either (1) get the current webpage URL or (2) set a value to it to redirect the user to some other URLs.
The difference is in how they are likely to be used (duh, bear with me.)
Setting window.location.href is a way to programmatically set the URL. For instance, window.location.href = 'https://www.google.com' will navigate the user to Google's search page. There is no way for your user to make use of this knowledge, unless they open the developer console.
Using an anchor tag of Google will show a hyperlink that the user can click, navigating them to Google's search page. This tag is also more likely to be interpreted by a screen reader more appropriately than a button with an onclick that navigates them to Google by setting window.location.href manually in Javascript.
Related
I'm working on an extension that's supposed to use the content of the page to determine whether to show an interface to the user.
The ways to show an interface, if I'm correct, are using a browser action or a page action.
And neither can be triggered programmatically. But content scripts could be written to inject an equivalent GUI into the webpage.
So, does it make sense to modify the DOM using content-scripts to display an interface as a substitute for page action? It seems like an obvious work around to me, and I'm sure there are good reasons to not let page actions be triggered programmatically.
Well, modifying DOM must be done by only Content Scripts, as that is the reason they exist.
Want to fetch any data from current page, alter anything in the page, add new UI in the page - whatever, content script will help you do that.
It has nothing to do with Page script Or Browser Script.
YES, you can not programatically trigger page/browser action. It has to be done by explicit clicking.
But if you want to open a UI by clicking a chrome extension, then there is a popup js for that.
I asked this previously in another place and got no useful replies.
One of the possible uses of the "target" attribute on an HTML link is to specify a named window, like:
Click here
Presumably the reason for naming a target, as opposed to just using "_blank", is that you want to be able to reference that SAME window for other links. For example, say you have a main page that you want to always remain in view, which has links to several help pages, and you want all of those help pages to open in a specific secondary window. So clicking the first help link opens the secondary window, clicking a second help link replaces the contents of the secondary window with a different help page, clicking the third help link replaces the contents of that secondary window again, etc.
But the existing browsers (Firefox, Chrome, etc.) do not do this. If you use a target attribute on your links with a specific (identical) window name, clicking those links opens a new, separate window with each click, even though the target name is the same. In other words, it behaves exactly as if you used target="_blank".
Why is this? What is the point of having the ability to name target windows if naming a window acts exactly the same as using target="_blank" ?
And is there any way to make a link actually use an existing window that has been opened with the same name instead of opening yet another window?
Have you tried it using Javascript?
//You keep a reference to the window
var mySpecialWindow = undefined;
function openInSameWindow(url)
{
//First time opening
if ( typeof( mySpecialWindow ) === "undefined" )
{
mySpecialWindow = window.open(
url,
"mySpecialWindow",
"width=300, height=250"
);
}
//Use existing popup window/tab
else mySpecialWindow.location.href = url;
return false;
}
//html
first link
second link
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:
_self: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
_blank: Load the response into a new unnamed HTML4 window or HTML5 browsing context.
_parent: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
_top: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
Attribute "target" allows to load documents into particular frame/iframe on the page. It is far from windows in these "tab days" but rather about views - containers of [sub]documents.
I am developing a web site where users can change settings which they have to confirm before taking effect.
The confirmation is done by a link I send them via E-Mail. In the HTML of the website I use this little snippet:
<script type="text/javascript">window.name="mysite";</script>
And in the HTML emails I use
Click me
But Chrome is always opening new tabs instead of opening them all in one.
Is this even possible or is it forbidden for some reasons?
Webmail platforms such as Gmail tend to modify some of the HTML code of an email due to security reasons.
They obviously remove any javascript code the email could have. But they also change (or add if none) the target property of every anchor element and set them to target="_blank" in order to avoid the user to be taken out of Gmail (in this case).
Unfortunately every webmail platform has their own behavior, therefore, what you want to do is not gonna work on every webmail platform.
If what you want to do is prevent the user from having multiple tabs of the same page opened, (*please refer to Update 1) it comes to mind you could use web sockets to close the previous tab once the user enters in the URL sent by email. Have a look at socket.io for example.
Update 1
There's no way to do this using WebSockets. There's no possible way to close a window that wasn't opened using javascript, and it can only be closed by it's parents.
That is a very interesting idea. I like it. Alas, it appears that, in modern browsers, you can no longer close a window you didn't open through javascript. So if you aren't allowed to run javascript in the email, the best you can do is to redirect the original page to a "thank you" page and leave it hanging around in the browser's tab (but no longer waiting on conformation). Like this:
PleaseConfirm.html:
window.name="need_redirected";
Confirm.html:
var w = window.open("", "need_redirected");
if (w)
w.location="ThankYou.html";
Of course, for old IE, I'd still try to close the old window in ThankYou.html:
window.top.close();
You can still try to set the target, of course, just in case it works, and you can always try putting an onclick attribute on your tag for the same reason:
click here
But that seems to be the best you can do. Bummer.
Neither of the other two answers work, but this one probably will:
In the initial tab, listen for an onstorage event, with a certain key being created, e.g. "userHasConfirmedEmail". When the event occurs, window.top.close().
In the new tab, create that key.
Credit goes to Tomas and his answer.
I´m tryin` to start a html-file always on a defined id.
I know that´s possible if you use that:
go to...
But this happens only if this link was clicked.
How can i force it all the time?
To start on a defined anchor (hash-defined) you will need to use JavaScript. The hash anchor in the end of a URL is used by the browser just after the navigation completes and you can't force it to "auto"-move without any client-side code.
To achieve similar effect with javascript perform the following function when the page is loaded:
function jumpToId( id ){
location.hash = "#" + id;
}
Of course, you will need to supply the id you want to jump to as the parameter to this function.
Please note, that in case JavaScript is disabled in the client's browser, the scrolling will not be performed. It is not a big deal, however, because majority of users have JavaScript enabled all the time (especially in today's social network-driven world :-) ).
Do you want it to scroll to the area or just immediately pop the user to it? For scroll you could use jQuery and just set it to scroll to the div using $(document).ready().
Here is an example. If you just want them to pop to it you could change the 1000 to 1 and it appears to immediately pop to the div.
Example Here Using jQuery
So I have been looking into this for a few weeks and have come up with nothing!
I work on the website for my families music store, and have been asked to add a "Links" page to the website. My goal would be to have the categories of our vendors (i.e. Violin, Guitar, Piano, etc.) on the left of the page and when the category is selected the links come up on the right. That part I have. The tricky part here is: When a link to a vendor (i.e. Fender, G&L, Yahmaha) is clicked instead of taking them directly to the site, I want it to take them all to the same page, but embeded on that page is the site.
I have done a lot of research on this and have come up with nothing. I could just go through and make a new page for each of the vendors, with the embedding on each individual page, but that is extremely time consuming with the amount of vendors.
Is something like this at all possible? I've been playing with embedding itself and have that down. It just comes down to, which link did they click, and loading that specific page.
If there is any more information you may need to help or point me in the right direction please let me know! Same with any code that may be helpful!
I've come up dead on all my research on this.
EDIT: I guess my ultimate goal is that it will look something like this: http://answers.yahoo.com/ so that the vendors website is open on bottom, but our stores banner and links are still at the top. Out website can be found here: http://www.brassbellmusic.com/default.aspx
I've created a JSFiddle to demo this functionality using jQuery.
We iterate through the list of brand links in the ul:
$('#brandListing a')
Capturing a click event on each:
.click(function(ev){
jQuery passes an event object to the anonymous function (ev). When the link is clicked, we first must prevent the default action, which is to follow the link. Then we update the src attribute of the iframe (the "embedded page") with the value of the href that was clicked:
ev.preventDefault();
$('#embeddedBrandWebsite').attr('src', ev.target.href);
You'll need to add the jQuery library to your page to use my code sample, but it's possible to replicate the functionality without it.
EDIT
The sample above is for a single page implementation, where links and the embed are on the same page. To achieve the requested "transfer of information," I recommend passing the target href as a GET parameter (brassbellmusic.com/brandEmbed.aspx?path=http%3A//www.gibson.com/). On the single "embed" page, you can then extract this either on the server side to set the iframe's src, or using javascript. With javascript, you might use:
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
Source
And then after your document is ready, set the iframe src using getURLParameter('path').