How open link in safari mobile app from webview - javascript

There are many topics of this here, but they all need native code interaction to work.
In my case, it is necessary to be able to do it directly from the url, without any interaction with my mobile app.
I tried:
Open Google in Safari
and
Open
and based in this post.
<script>
$(document).on('click', 'a[target="_blank"]', function (ev) {
var url;
ev.preventDefault();
url = $(this).attr('href');
window.open(url, '_system');
});
</script>
but nothing works.
Anyone have any idea how to fix this?

There is a trick. We know iOS Safari have these available URL Schemes:
(HTTP) — http://websiteurl
(HTTPS) — https://websiteurl
x-web-search://
(FTP) — ftp://locationtofileonftpserver
If you use Click here or window.open("http://somewebsite"). It always use current browser to open url.
x-web-search://?[keyword] - It will switch into Safari app but search for the keyword
Luckily we still have ftp:// left. It will switch to Safari app. But first you need to setup a public folder in your hosting & create a bridge html file to redirect user back to http:
ftp://{youripaddress}/bridge.html
window.open("https://yoururl", "_self");
Now you can open your website in the default Safari app from any browsers.
The original answer is here: JS - Mobile - Open Safari from any browser
Update (2021-01):
Apple seems to fix this on iOS, this is no longer work!

If this is running in safari it should comply with safari async call restrictions regarding popups as explained here.
You should fix your code so that the window open will be outside the function, Something like that:
<script>
var windowReference = window.open();
$(document).on('click', 'a[target="_blank"]', function (ev) {
var url;
ev.preventDefault();
url = $(this).attr('href');
windowReference.location = url;
});
</script>

There isn't a URL Scheme for Safari on iOS.
See Apple's Documentation:
https://developer.apple.com/library/archive/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.html
Have a search around and you will see similar answers:
What is Mobile Safari's custom URL Scheme?

Related

Chrome giving me "Download Failed" on iOS devices using Javascript redirect

I would like to display a thank you page to the end user after an .ipa or and .apk file is downloaded.
I've been testing the following code:
<script type="text/javascript">
function DownloadAndRedirect()
{
var DownloadURL = "http://domain/file.ipa";
var RedirectURL = "/thankyou.html";
var RedirectPauseSeconds = 9;
location.href = DownloadURL;
setTimeout("DoTheRedirect('"+RedirectURL+"')",parseInt(RedirectPauseSeconds*1000));
}
function DoTheRedirect(url) { window.location=url; }
</script>
Click to download
It does work on most devices.
Tested on Android devices, both Firefox and Chrome works.
Tested on iOS devices, Safari, Opera works, but:
Chrome is giving me a warning page of "Download Failed." immediately after click the download link, with orange folder icon and an exclamation mark at the middle, and a "RETRY DOWNLOAD" link at the lower right corner.
When this page appeared, it does give me the option if I want to "Cancel" or "Install" the .ipa file.
If I don't use the Javascript method, and place the .ipa file directly in the anchor field, every browser works.
Only Mobile Chrome browser is doing this with Javascript integration. Any solution?
Is there an alternative javascript solution that will serve my purpose across different devices and browsers?

Download a file when clicking an anchor in Internet Explorer

I've seen similar questions but so far am unable to solve this problem:
I am trying to download a file (mp4) located in Azure Blob storage when an anchor is clicked. This currently worked in Chrome, Firefox, Safari etc but from what I'm aware IE doesn't support the download attribute.
I have access to the storage account so tried changing the Content-Type to application/force-download and the Content-Disposition to attachment;filename=someName. This resolved the problem for Firefox cross domain limits but still no joy in IE. I have tried application/octet-stream but this did not work either.
Currently in IE11 it tries to open Windows Media Player (not sure why), but in IE10 and lower nothing happens, the browser just hangs whilst trying to navigate to the blob storage URL.
So next was to try some client side. Using Jquery I attempted the following:
$('.fallback[data-auto-download]').click(function () {
var $this = $(this);
window.location = $this.attr('href'); //download file
setTimeout(function () {
window.location.href = "/Content/Confirmation";
}, 3000); //redirect to new page after timeout
});
And this is how it looks in the markup:
<a class="fallback" data-auto-download href="http://someBlobURL">Download video</a>
As mentioned above this is not working for IE. Are there any current methods to get this to work? Research states to change the Content Type but that doesn't seem to get it working.
Please note: We cannot use right click to save target as because this project requires a new page to be loaded when the file download has been initiated.

Opening url in new tab from dropdown select

I have this and i can't get it to work on Safari for OS X (Safari 8.0). It works on Firefox and Chrome but i simply cannot get it to work in Safari.
function myChangeHandler()
{
window.open(this.options[this.selectedIndex].getAttribute('value'), '_blank');
this.form.submit();
}
What am i missing?
Thanks
I'm not sure what doesn't work since there is no specific problem that is posted but I'm guessing it's the window.open()?
I found this article
window.open(url, '_blank'); not working on iMac/Safari
it might be the one you were looking for.
From:
Kelly J Andrews
The standard window.open() JavaScript method cannot be used to open a new tab and window from a global HTML file or an extension bar. Instead, the global file and extension bars have access to the SafariApplication, SafariBrowserWindow, and SafariBrowserTab classes, whose methods and properties allow you to work with windows and tabs.
It goes on to explain how you can use
var newTab = safari.self.browserWindow.openTab();

SetTimeout Redirect Not Working with Firefox

I have been working with a page that redirects a user to either an installed application or a webpage (the fallback). This is called when the page first loads via ClientScript.RegisterStartupScript; the Javascript portion looks something like this:
<script type='text/javascript'>var a = window.location.search; setTimeout(function(){ window.location.pathname = '/Fallback.aspx'}, 500); window.location='myapp://open' + a;</script>
So far, this snippet always functions as expected in Google Chrome, redirecting the user to the Fallback page whenever the 'myapp://open' fails to open correctly within the given amount of time. In Internet Explorer, it only works when the timeout value is set to 100 or lower. My problem at this moment is Firefox, which fails to redirect correctly no matter what the timeout value is set to. (For Firefox, I have tried values of as little as 25 and as high as 2000.)
Does anyone know what the Firefox browser might do differently that would prevent it from redirecting, and if so, is there any known workaround for it?
Thank you very much in advance for your time and advice.
UPDATE: The exact error page I am getting from Firefox is titled "The address wasn't understood", with the description similar to the following: "Firefox doesn't know how to open this address, because the protocol (myapp) isn't associated with any program."
UPDATE: To test this, you can replace '/Fallback.aspx' in the code with 'www.google.com'. If this is tried in IE or Chrome, the browser will fail to open myapp://open and should redirect you to Google instead; this is the intended functionality since the application is not installed. However, in Firefox you will likely be left at the error page telling you the protocol is not recognized; it will fail to redirect to the fallback. I hope this helps, and I apologize for the original wording of my question.
I have found a few different ways to get around this for anyone who may stumble across this question with the same issue. =) The first is by using redirect code in code behind, singling out the Firefox browser which needs to be handled differently:
string userAgent = Request.ServerVariables["HTTP_USER_AGENT"];
if (userAgent.Contains("Firefox") && !userAgent.Contains("Seamonkey"))
{
ClientScript.RegisterStartupScript(this.GetType(), "checkForApp", "<script type='text/javascript'>var a = window.location.search; try { window.location.href='myapp://open' + a; } catch(e) { window.location.pathname = './Fallback'; }</script>"); //Firefox Only
}
else
{
ClientScript.RegisterStartupScript(this.GetType(), "checkForApp", "<script type='text/javascript'>var a = window.location.search; setTimeout(function(){ window.location.pathname = './Fallback.aspx'; }, 100); window.location.href='myapp://open' + a;</script>"); // IE & Chrome
}
Although it worked, I do not like this method because it examines the user agent. After this someone suggested to me that I should put an iframe on my fallback page to open the app and just direct everyone to the fallback page instead (which still opens, but if the app is installed, it should open too.) This works in most browsers but not Internet Explorer:
<iframe name="open_app" id="open_app" src="myapp://open" style="height: 1px; width: 1px; visibility:hidden;" ></iframe>
The method I finally decided to go with was an object tag on the fallback page. So far, this seems to work in most major browsers and tested successfully using Chrome, Firefox, Safari, and Internet Explorer. Using this, the fallback page is still opened in the user's browser, but the app will also be opened if it is installed.
<object data="myapp://open<%= Request.Url.Query %>"/>

Universal add to bookmarks script?

Does anyone know of a script that I can use to automatically add a site to favourites upon clicking of a link for multiple browsers? Atleast Firefox, IE, Chrome would be good.
If not, is there a way I can simulate ctrl+D through Javascript as I know that keystroke adds a site to bookmark in most browsers?
A universal script for adding to bookmarks doesn't exists, because not all browsers expose an API for creating bookmarks. Generally, only IE exposes a direct API for this. Both Opera and Firefox offer a possibility to add a site to bookmarks that will be opened in the sidebar and that is a huge difference. Safari and Chrome also don't expose any API for this task.
Some more info on this topic
I use a small script to attempt adding a bookmark using the most popular window methods, until all have failed. Then it just prompts the user to manually add their bookmark...
Like others have said (above) some browsers prohibit script-activated bookmarking, and because of security they want only users to add bookmarks.
It is not perfect, but it is simple and works well.
function addBookmark()
{
var success=false;
// try each until all fail...
try {
window.external.AddFavorite(window.location, document.title);
success=true;
} catch(e) {}
try {
window.sidebar.addPanel(document.title,location.href,'');
success=true;
} catch(e) {}
if(!success)
{
alert("AUTO BOOKMKARING not supported\r\nIn your current browser.\r\n\r\nPress CTRL+D, or CMD+D\r\nto manually bookmark this page.");
}
}
You can check out this jquery plugin if you are using that or just look at their source if you want to use your own. Though he mentions on his compatibility that Safari and Chrome do not expose this functionality in their API.
http://www.dummwiam.com/jFav
See digitalinspiration.
1st Google result for javascript bookmark.
In internet explorer it works with:
window.external.AddFavorite(document.location,document.title);
in firefox and in opera with:
Some link name
I haven't found a solution for safari / chrome yet.

Categories

Resources