I am working on an affiliate website for which redirect is the most critical part. I used a simple script to pop open links in a new window. But since last week suddenly chrome started blocking these popups.
$(".get-code").click(function() {
$couponId = $(this).attr("data-coupon-id");
$url = $(this).attr("data-coupon-url");
$outUrl = $(this).attr("data-out-url");
//alert("Coupon Id: " + $couponId + " URL: " + $url + " Redirect URL: " + $outUrl);
window.open($outUrl, '_self');
window.open($url, '_blank');
});
Does anyone have any idea about this?
I fixed it by breaking both the redirection into two parts.
One redirection is done on the click event and another one is using the href link of the anchor tag. This way chrome doesn't block it and also works fine in IE and Firefox.
<a rel="noopener noreferrer" onclick="return hitTarget('URL1')" href="URL2" >GRAB CODE</a>
JavaScript redirection
function hitTarget(target){
window.open(target,'_blank');
return true;
}
Related
Per a client request, we forced all external links to open in a new tab. Currently I am using a js script for that.
However, it is also forcing the tel and mailto links to open new tabs as well. And I think that is why I am getting an error on some devices when you click and email link, where a pop up box says "This website has been blocked from automatically composing an email" - that one was uncovered specifically on an iPhone 6.
How can I force external links- but exclude mail and telephone links? Any assistance is greatly appreciated.
This is the external link script that I am using currently. I thought maybe I could just make an alteration to look for only external links that had "http" but an else statement for tel and mailto. But I am not sure how I could go about that.
jQuery(document).ready(function($) {
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
});
}
});
});
Combined with my comment, I would opt to go for a check against the href attribute of each anchor, and check that it does not start with mailto: or tel::
(and the external link is not working at all, I guess that is caused by the snippet environment)
jQuery(document).ready(function($) {
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href) && this.href.substr(0,4)!='tel:' && this.href.substr(0,7)!='mailto:') {
$(this).attr('target', '_blank');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
website,
e-mail and
phone.
I must admit that it is not ideal to check for all protocols that you might want to exclude, but it definitely is easier than checking for everything that you would like to open in a new window/tab.
I have some hidden divs in a HTML page with specific IDs:
<div id='log1' style='visibility: hidden;display: none;'>content</div>
<div id='log2' style='visibility: hidden;display: none;'>content</div>
And then some links:
<a href='?' target='_blank'>Log 1</a>
<a href='?' target='_blank'>Log 2</a>
I want the browser to open a new page / tab (or even a popup but this might be bad if the user has popup blockers) with the contents of the corresponding div.
I know I could do some Javascript to create a floating div and show the data in the same page, but I'd like to avoid that. Moreover, if there is a way of doing what I ask without JS (which I doubt) even better.
You can't do a popup based on hidden divs in your HTML without using JavaScript, no. There's a CSS trick where if you put the divs far off the page and give them an ID, then link to that as an anchor, the browser will scroll it into view.
On the JavaScript side, it's fairly straightforward. First, add a data-log attribute to them to tell us what log we should show, then:
var links = document.querySelectorAll("...some selectors for your links...");
Array.prototype.forEach.call(links, function(link) {
link.onclick = function() {
var log = document.getElementById(this.getAttribute("data-log"));
var wnd = window.open("", "_blank");
wnd.document.write(
"<!doctype html>" +
"<html><head>" +
"<meta charset='appropriate charset here'>" +
"<title>Title here</title>" +
"</head><body>" +
"<div>" + log.innerHTML + "</div>" +
"</body></html>"
);
wnd.document.close();
return false; // Prevents the default action of following the link
};
});
Note the window.open must be done within the click handler; most popup blockers will allow the popup if it's in direct response to a user action.
window.open returns a reference to the window, and then we can write to its document.
(I don't normally use onclick handlers, but you didn't mention using any library and there's still a lot of IE8 out there. Using onclick lets us use return false to prevent the default; details in this small article on my anemic little blog.)
var newWindow = window.open("about:blank", "", "_blank");
newWindow.document.write(html);
In this case you should be doing this using javascript within a call back it could be on page load or on button click or something else
I have a link which when clicked redirects the user to the same page except with additional parameters:
<a id="lnkExportToPDF" href="javascript:void(0)">Export</a>
$('#lnkExportToPDF').click(function (e) {
e.preventDefault();
window.location.href = path + 'users/export/' + parm1 + '/' + parm2;
});
On the server side I handle it by checking for "export" in the request path, and if it's found I write a PDF file to the response:
System.Web.HttpResponse response = System.Web.HttpContext.Current.Response;
response.Clear();
response.AddHeader("Content-Type", "application/pdf");
response.AddHeader("Content-Disposition", String.Format("attachment; filename=" + filename + ".pdf; size={0}", buffer.Length.ToString()));
response.BinaryWrite(buffer);
response.End();
Everything works and the user can download the file, but any additional actions by the user that uses the loader.gif which is on the page shows an unanimated loader.
What could be causing this to happen? Is there any way to refresh/reload the page/javascript after the response is complete?
edit: I've found a useful JS tool here: http://fgnass.github.io/spin.js/ but I'd prefer not to use it unless absolutely necessary
edit2: I also tried using a generic handler (.ashx) to handle the request (ie. changing the href to point to the handler), but as soon as the page redirects and the file is written, same thing happens
edit3: The problem is only happening in Firefox so far. I've tried Chrome and IE and the gif stays animated in those browsers. (latest versions of each)
edit4: If I use an iframe with the src as the image it solves the issue, but it's very hacky and the style of it looks different across all browsers with regards to centering/padding/margins.
edit5: Yeah. If I inspect the frozen gif with firebug it magically unfreezes itself.
I managed to recreate the problem in firefox and I really can't find a way to "unfreeze" the gif. When I added a completely different file after a download and that too was frozen I gave up with that approach.
What I did instead was to test different ways to trigger the download. I found no window.location solutions that worked, what did work though was this:
window.open(path + 'users/export/' + parm1 + '/' + parm2);
window.open opens a new tab and downloads the file through that instead of the current tab as window.location does. It will return to the current tab as soon as the download starts.
Edit
You could also use a hidden iframe:
var iframe = document.getElementById('iframe');
iframe.src = path + 'users/export/' + parm1 + '/' + parm2;
I confirm that I have the same behavior with firefox, and the first that come to my mind is to use SetTimeOut but still the same behavior, so on firefox for some reason, this window.location.href is also call the "Stop" on browser, that this cause the gif animation to stop.
So what I found and you can solve your issue, that this is not happends on simple links.
And if you change your code you can archive the same effect with a link.
So change this
$('#lnkExportToPDF').click(function (e) {
e.preventDefault();
window.location.href = "page.aspx";
});
to something like this
$('#lnkExportToPDF').attr("href", "page.aspx");
and you have the same results, and gif will still moving.
Here is the fiddle test.
On the test I add to move to paypal, because is slow moving and you can see the animation stop or not, also pp not let show on iframe, so on example you stay on example and not load the page.
When you click on this example, the issue is appears only on firefox !
http://jsfiddle.net/hn7S9/4/
One other issue that I think is that if you need to make your parametres to the next page on click, you probably need to redesign that and fix them before your click.
This is possible because for sure is not depends on the last click on the dynamic create link. So make the link with their parametres before the click.
You could try an asynchronous approach on the click to allow the browser to parse the event queue after the click has initiated:
$('#lnkExportToPDF').click(function (e) {
e.preventDefault();
setTimout(function() {
window.location.href = path + 'users/export/' + parm1 + '/' + parm2;
}, 20);
});
How about allowing the link to actually fire, but opening it in a new tab?
That shouldn't interrupt anything about the gif, and is semantically fine, other than I guess it would leave a tab open. You could get rid of the content-disposition, and allow the browser /user to decide what to do with it though.
<a id="lnkExportToPDF" target="_blank">Export</a>
$('#lnkExportToPDF').click(function (e) {
$(this).attr("href", path + 'users/export/' + parm1 + '/' + parm2);
});
Instead of setting the window.location.href, you can use a form with method="get" and submit it. This form could either be coded into your HTML or created dynamically. See this Answer:
https://stackoverflow.com/a/21742326/1614903
Here's my solution. It's faster and easier than any fix or workaround I've found. Just open the problem page in Chrome. Chrome has it's own problems, but this isn't one of them. Whenever I encounter a page full of gifs that causes Firefox to freeze, I just copy the URL, close the tab, open Chrome, and paste in the URL. I works every time! :o)
Ive got a url to a custom protocol (i.e. myproto://dosomething) and i can get it to work but when a user clicks on the url it redirects the page before popping up the "do you want to open this url" dialog.
Is there any way to have the custom protocol to work with out the redirect?
For example:
Page:
<html>
<body>
My Url
</body>
</html>
When user clicks link, browser redirects to blank page with myproto://dosomething as url and shows popup. What im trying to do is have it so that the popup shows but stays on the main page.
So i found a solution to this issue: iframes
var launchLink = function(href) {
var url = ProtoRedirectUrl + '?' + $.param({ url: href });
$('<iframe src="' + url + '" width="1px" height="1px">').appendTo('body');
}
This causes the url to be loaded and the browser redirects the iframe window to the blank page instead of the main window.
i have Problem with opening popups in javascript i have this function to open my popups in IE6 and IE7:
function open_window(Location,w,h) //opens new window
{
var win = "width="+w+",height="+h+",menubar=no,location=no,resizable,scrollbars,top=500,left=500";
alert(win) ;
window.open(Location,'newWin',win).focus();
}
it's working . i mean my new window opens but an error occurs. The Error Message is :
'window.open(...)' is null is not an object.
do you want to countinue running script on this page ?
then i have button in onclick event it's will call a function to close current window an refresh the opener function is
function refreshParent(location)
{
window.opener.location.href = location ;
window.close();
}
it's also gives me error : window.opener.location is null or not an object but i'm sure i'm passing correct parameters
i call it like this :
for second part :
<input type="button" name="pay" value="test" onclick="refreshParent('index.php?module=payment&task=default')" >
for first part :
<a onclick="javascript:open_window('?module=cart&task=add&id=<?=$res[xproductid]?>&popup=on','500' , '500')" style="cursor:pointer" id="addtocard"> <img src="../images/new_theme/buy_book.gif" width="123" border="0"/> </a>
it's really confuse me . Please Help ;)
When popup windows opened using window.open are blocked by a popup blocker, a feature of pretty much any modern browser these days, the return value of window.open() is not a window object, but null.
In order to circumvent these issues you would need to test the value returned by window.open() before attempting to invoke any methods on it.
Below is a piece of code to demonstrate how to go around this problem:
function open_window(Location,w,h) //opens new window
{
var options = "width=" + w + ",height=" + h;
options += ",menubar=no,location=no,resizable,scrollbars,top=500,left=500";
var newwin = window.open(Location,'newWin',options);
if (newwin == null)
{
// The popup got blocked, notify the user
return false;
}
newwin.focus();
}
In general, popup windows should be used only as a last resort or in controlled environments (internal company website, etc). Popup blockers tend to behave in very inconsistent ways and there may be more than a single popup blocker installed in a given browser so instructing the user on how to allow popups for a given website is not necessarily a solution. Example: IE7 + Google toolbar = two popup blockers.
If I may suggest, perhaps you should consider using something like this:
http://jqueryui.com/demos/dialog/
The advantages are numerous:
Skinnable, so you can create a more consistent look to match your website.
No popup blockers.
Good API and documentation that is consistent across most, if not all, major browsers.
If you still require that the newly opened "window" contain an external URL, you could use an IFRAME inside the opened dialog window.
Hope this helps,
Lior.
Works perfectly fine for me. Tested in IE6/7/8.
Of course I couldn't test it with your URLs so I replaced these with simple filenames. I'd suggest you try it also with simple filenames and see if it also fails then.
Beside that...
You don't need to add "javascript:" at the beginning of onclick attribute value.
It would also be good if you added a href="..." attribute to the link with the same URL that you give to open_window. Then it would become a real link and you wouldn't have to add cursor:pointer to it. For example:
<a href="?module=cart&task=add&id=<?=$res[xproductid]?>&popup=on"
onclick="open_window(this.href, '500' , '500'); return false;"> ...
Here is a way to have your cake and eat it too
I have not tested it on all browsers but it should really work
function open_window(url,target,w,h) { //opens new window
var parms = "width="+w+",height="+h+",menubar=no,location=no,resizable,scrollbars,top=500,left=500";
var win = window.open(url,target,parms);
if (win) {
win.focus();
return false; // cancel the onClick
}
return true; // make the link perform as normal
}
Using the link
<a href="?module=cart&task=add&id=<?=$res[xproductid]?>&popup=on"
target="newWin"
onclick="return open_window(this.href,this.target,500,500)"
id="addtocard"><img src="../images/new_theme/buy_book.gif" width="123" border="0"/></a>
which even saves you the silly cursor thing since it is an actual link which works even when JS is turned off