I have created a HTML link (<a>) using the Extjs BoxComponent and it works just fine. But instead of having a fixed URL associated with the link, I want to be able to update the href property when the user clicks the link.
In the code below the href is updated when the user cliks the link and I can verify this using FireBug on the HTML element. But the new page opening is missing my addition to the href.
Question:
Is it too late to modify the href on onClick or is it because I am modifying the href in the wrong way?
Code:
xtype: 'box',
html: 'Link to google',
listeners: {
render: function (c) {
c.getEl().on(
'click',
function() {
this.el.child('a', true).href = 'www.google.com/#q=' + some_dynamic_value;
},
c,
{ stopEvent: false }
);
}
}
Looks like this can work by using the mousedown event, instead of the click event.
Check out: http://jsfiddle.net/sadkinson/rF5TQ/15/
Its possible that by the time the click has happened changing the URL within it is too late. Is it not possible that whatrever causes your link to need updating can be done when that is changed rather than waiting till the user has clicked the link?
I would imagine a number of browsers would ignore this, simply because it would be an efficient way of being malicious. Putting a link to say "google" and then redirecting you to some virus ridden site etc, as even the most sensible user looking to see where a link would take them would see google until it was too late.
Related
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.
I am new to protractor and would like to test if a link is working.
I understand trying to get the element id but what should i expect that the link equals?
Also has anyone got any good documentation on example protractor tests?
I have been through this http://angular.github.io/protractor/#/tutorial which was helpful but i need more example of possible tests I could do.
i have this so far:
it('should redirect to the correct page', function(){
element(by.id('signmein').click();
expect(browser.driver.getCurrentUrl()).toEqual("http://localhost:8080/web/tfgm_customer/my-account");
});
would like to test if a link is working
This is a bit broad - it could mean the link to have an appropriate hrefattribute, or that after clicking a link there should be a new page opened.
To check the href attribute, use getAttribute():
expect(element(by.id('myLink')).getAttribute('href')).toEqual('http://myUrl.com');
To click the link use click(), to check the current URL, use getCurrentUrl():
element(by.id('myLink').click();
expect(browser.getCurrentUrl()).toEqual("http://myUrl.com");
Note that if there is a non-angular page opened after the click, you need to play around with ignoreSynchronization flag, see:
Non-angular page opened after a click
If the link is opened in a new tab, you need to switch to that window, check the URL and then switch back to the main window:
element(by.id('myLink')).click().then(function () {
browser.getAllWindowHandles().then(function (handles) {
browser.switchTo().window(handles[handles.length - 1]).then(function () {
expect(browser.getCurrentUrl()).toEqual("http://myUrl.com");
});
// switch back to the main window
browser.switchTo().window(handles[0]);
});
});
I am using createHTMLNotification for a chrome extension. The html for the notification includes a link in it. What im trying to figure out is how to close the notification when the link is clicked. My code is following
var notification = window.webkitNotifications.createHTMLNotification(
"notification.html"
);
notification.show();
The code on the notification.html page fills in the data. This page includes the jquery library. When I try to do:
$('#title > a').click(function() {
notification.cancel();
}
This of course does not work because notification is unknown on this html page. I have also tried to do a notification.onshow during the first part of the code where i create the notification, but this as well produced no results.
Well I figured it out. It was actually a pretty simple fix. All you have to do is in the click event for the href in the notification, add window.close(). This is because according to W3C specification it is a separate window so you can treat it as such
You can try following to set the focus to newly opened tab and close the notification on the way
notification.onclick = function(x) { window.focus(); this.cancel(); };
notification.show();
I need to delay a little bit redirection to a new page after clicking on certain links.
Right now I'm using following jQuery:
$('.menu-element a').click(function(){
var src = $(this).attr('href');
$(this).removeAttr('href');
anim(src);
})
And it works fine. It runs really short animation and after that redirects to clicked page.
But I would like to keep the href attribute of link (i.e. in case when someone clicks twice very fast).
when I add $(this).attr('href', src); at the end of code listed above, it doesn't wait for animation to finish only redirects to new page right after clicking on the link.
How can I preserve the href property and avoid the page being redirected to new address by it?
add return false into your function. This prevents the browser following the link's href, and is then up to you to make that redirect in your javascript. e.g. by adding something to the end of your anim() function that updates the location.
It also means you don't need to remove the href from the link.
$('.menu-element a').click(function(){
var src = $(this).attr('href');
anim(src);
return false;
})
You can use event.preventDefault(). return false will also work, but it will also stop event bubbling (not a problem most of the time, you just should be aware of it).
$('.menu-element a').click(function(event){
anim($(this).attr('href'));
event.preventDefault();
})
I have a group of links on a page. when the user clicks a link it triggers an asynchronous request and a content area on the page is updated with the response html.
This works fine, except for if the user clicks the link with the 'middle-button' (or mouse wheel, whatever it's called!). Then a new tab opens and the response gets returned and rendered to that tab.
Is there any way for me to prevent this from happening?
catch the link with javascript and override the default link behaviour.
like this:
$('a.ajax').click(function(e){
e.preventDefault();
// do ajax stuff, and add an onfinish function that does
// something like document.location.href = this.attr('href');
});
You don't have to do the document.location.href, as I just noticed that a content area is updated. Just catch the default behaviour with the e.preventDefault();
// edit
The preventDefault won't stop the middle mouse button... Have you considered not using tags? I know it should be accessible so maybe a span containing the link, so you can add the onclick event on the span and hide the link with css?
Unfortunately no, Javascript wont have access to that sort of control for security reasons as it would be wide open for abuse.