I need to test a page tracker behavior. The tracker's reporting triggers when links are clicked, however generating a click event on anchor elements doesn't instruct the browser to navigate to the page in the link. I tried Selenium IDE - to no effect.
Is there any way to accomplish this? Perhaps some browser setting? If it is specific to Firefox or Google Chrome or Opera - it doesn't matter, I could use any of those for testing.
Here's a similar question How do I programmatically click a link with javascript? but it doesn't help in my case, as as I just described, no navigation happens in this case.
<a id="gLink" href="http://www.google.com">Google</a>
<script>
document.getElementById("gLink").click()
</script>
Does the trick.
Normally, clicking on an anchor link takes you somewhere else inside the page and changes the anchor link to foo.php#bar (where bar is the name of the anchor), so this behavior is by design.
Here are all the different methods I can think of
Method 1: adapt your tracker
Perhaps you can configure your tracker to track these changes? Clicking on an anchor fires up the hashchange event. Check this SO question
Check these links for ways to utilize the hashchange event:
https://developer.mozilla.org/en-US/docs/Web/API/window.onhashchange
http://oshyn.com/_blog/General/post/JavaScript_Navigation_using_Hash_Change/
Method 2: use the HTML5 history API
You can change your browser's URLs programmatically via the HTML5 pushState() method, i.e. the history API.
Here are some examples of utilizing the HTML history API:
http://diveintohtml5.info/history.html
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history
Related
So in my case I use Iframes to attach Grafana to my page (which provides me beautiful and easy to use graphs).
It's possible to notice that Grafana's Iframes triggers a kind of refresh on my Angular page after each interaction of zoom in or zoom out (using mouse clicks) on the graph thus messing broswer's history. I don't see any changes on Iframe's src to justify this page refresh and it doesn't trigger anything apparently (doesn't trigger any onload, for example).
Is this a normal behavior? How can I prevent this?
I am using a scripted dashboard of Grafana version 6.2.2 along with Angular 6.1.
Hoping to help out, some things that I might try in your scenario:
A blank html page with only a grafana Iframe in it. See if it still refreshes the parent page. If not, then maybe the problem is with angular.
You said sandbox breaks the iframe? Maybe play around with different sandbox values. Like allow-scripts and see if it needs one of those values to work
https://www.w3schools.com/tags/att_iframe_sandbox.asp
Maybe try putting the grafana iframe in another iframe. I've never done this before, but maybe it will try to refresh the parent iframe instead of the parent page.
It could be helpful to post your angular html code to the question too. Might be some hints in there.
Without the effective implementation of the iframe is difficult to suggest the best way to act.
The simplest solution that comes in mind is iframe's sandbox attribute:
<iframe src="my_iframe.html" sandbox></iframe>
What's an iframe sandbox ?
The sandbox attribute enables an extra set of restrictions for the content in the iframe.
When the sandbox attribute is present, and it will:
treat the content as being from a unique origin
block form submission
block script execution
disable APIs
prevent links from targeting other browsing contexts
prevent content from using plugins (through , , , or other)
prevent the content to navigate its top-level browsing context
block automatically triggered features
The value of the sandbox attribute can either be just sandbox (then
all restrictions are applied), or a space-separated list of
pre-defined values that will REMOVE the particular restrictions.
Ref: https://www.w3schools.com/tags/att_iframe_sandbox.asp
You can overwrite the <iframe>'s pushState and replaceState functions:
iframe.contentWindow.history.pushState = new Proxy(iframe.contentWindow.history.pushState, {
apply: () => {},
});
iframe.contentWindow.history.replaceState = new Proxy(iframe.contentWindow.history.replaceState, {
apply: () => {},
});
I am making a simple online application.
I have a navigation bar with a few buttons and one "div" into which all the new contents will be loaded dynamically i.e. when I click "About", it will load the page parts into the "div" without reloading the whole page with .load() function. The problem is:
what if I need to give a link to the Documents section of my web site, or the user wants to store this kind of link, the url is not rewritten when browsing my site. when the user stores the default link it will always link him to the default "Home" part.
How can I rewrite the URL and what is the most correct way to do this?
As option you can use location.hash.
E.g. user clicks About
and you're loading the content of your "About" page.
Also the URL in browser's address bar will be changed to something like http://mysite.com/hello.jsp#about.
So now user can copy this URL and visit it.
Then in $(document).ready() you can check the location.hash, find that '#about' anchor in it and then load an appropriate content.
Another option is to use Backbone.js or any other JavaScript MVC framework that you like which will help you to build rich client-side application and will handle such things for you.
According to me, appropriate method is to update the hash of the URL. Something like example.com/#About and etc. People can bookmark these. You have to take care to make a AJAX call when you read a hash tag in the URL and load the respective page.
What I would do is make ajax call on hashchange event instead of click. This event is supported from IE8 to all modern browsers. If you want to support IE7 use the hashchange plugin by Ben Alman.
Most resources suggest using onclick handler with trackEvent() for tracking outgoing links. BUT this way does not work with all navigation methods! It won’t work if you click with middle button (except Chrome) or control-click (except Chrome and FF) to open new tab, if you right-click and select new tab or window from context menu or if you drag link to another tab. Is such cases onclick is simply not called. You can check it with very simple link:
GO
Putting JavaScript in href attribute breaks the link in all cases when new tab or window is opened.
Putting onclick in span that looks like a link, will not allow users to decide if they want to open in new tab or not.
Finally, going through a redirect page, which tracks outgoing event, causes problems with back navigation – when users try to go back, they get back to the redirect page and then JS again redirects to the destination page. They need to click back twice … quickly.
Is there a better way, which would be both accurate and user friendly?
Context menu can't be detected by using JS. So if you want to catch that you need to use the redirect method. To fix the back button problem, redirect using location.replace to remove the tracking page from the back-button history.
I don't know any details about Google Analytics. In general, to track users' external navigation:
<a ping> is made for this purpose. If ping is not available, fall back to changing the links to go through a redirect page. Use a 302 redirect to prevent it from showing up in history; if you can't, try javascript:window.location.replace().
I'm using Google search in a page, and it shows up in an IFRAME. However, when you click on a link in the search, it's leaving my site and redirecting to that other site. Is there a way to intercept that call with jQuery and make it open that link in a new window, instead?
Due to security reasons, what you can do with an iframe is very limited (In cases where you frame another domain).
The way this is implemented varies a bit from browser to browsers but most browsers won't let you manipulate the data in the iframe.
To my knowledge this isn't possible, assuming you are refering to an implementation of http://www.google.com/cse/
When using custom actions in SharePoint (for the Site Actions menu) how can I make it so that the links will open up in a new window?
I have tried an approach using jQuery that would attach a hover event via .live() to replace the window.location with a window.open call -- however this proved to be troublesome as it refused to work in IE6 (which a large portion of our users are still using...).
Its is not possible out of box. But it can be done using little hack. Refer to these links
MSDN Question
Blog Post