I've got a form in a web page with an action that is "mailto:email" (where email is a real email address). When I load this page in Mobile Safari in regular mode (ie, not launched from home screen with app-capable mode), this works fine - after I submit the form, the email app comes up. However, when I'm in app-capable mode and have launched from the home screen (so, no Safari chrome), and submit the form I get the error "URL can't be shown". However, a regular mailto: link (ie, not in a form) does work when in app-capable mode.
Has anyone else noticed this? Any workarounds? Are forms disallowed in app-capable mode?
Thanks,
Elisabeth
This accurately describes the issue. There is nothing wrong with the mailto link, the mailto link fails to load. Often the webapp crashes.
The funny thing is that tel: link for telephone numbers work fine.
window.location.replace does in-fact work. Thanks!
Here is the jQuery to fix this automatically...
$('a[href^=mailto]').click(function (event) {
event.preventDefault();
window.location.replace = $(this).attr('href');
return false;
});
I think I've figured this out. I noticed when in app-capable mode, any http link will take you out of the app and launch a separate mobile safari window, take you to the page and show the Safari chrome. Makes sense (typically one wouldn't link to anything from an "all in one" app-capable web app. I noticed this because I implemented a 4 page app with my own "tab bar" at the bottom and was linking amongst the .html files with plain http links in the a element. When I replace this with a javascript function to load the pages using document.location.replace this doesn't happen.
So, on the form - I think what must be happening is that because I'm using a scheme (in this case, mailto:) somehow the browser is needed in "regular mode" to interpret the scheme and do the right thing by launching the email app and this clearly doesn't work when submitting a form. I haven't yet found anything in the Apple documentation specifically about this, so if anyone knows the technical details, please do post!
UPDATE: I did find that I can access a server side script using a form in web-app mode, so I'm still curious about the mailto: issue, if anyone has an answer.
Thanks,
Elisabeth
I am having the exact same issue with mailto links not working in the web capable mode. I just got done submitting a bug report to Apple. Let's see what happens, meanwhile I found another dev. platform for web apps that works in web capable mode and mailto links work, but it is funny how it works in this even--it is not as fluid as it is in Safari. Because even in this new web dev tool that I found, it closes your app and launches mail client, which is lame. In Safari it just slides in a mail window that slides back out if you hit cancel or send--it doesn't actually close your app.
Here is a workaround that does not depend on JQuery:
aTmp = document.createElement("a");
aTmp.href="mailto:example#example.com?subject=Test&body=Hello.";
aTmp.click();
Update: To run this code from a bookmarklet you have to wait about 1000 ms before the bookmarks bezel is closed and the browser is ready to respond. I realized this by wrapping the code in a setTimeout function.
Related
Until today, I was able to add ?ref=ts to a Facebook tab url & it would be mobile-friendly.
Not today. Has anyone else experienced this? Is there a workaround to the workaround?
Link for example: https://www.facebook.com/microartssandbox2015/app/924049424328019/?ref=ts
Works fine on desktop.
However, on mobile, I get:
The page you requested cannot be display right now ...
This has never really worked for me. The general (and well known) workaround is to use an external website and redirect to the Page on desktop. On mobile, you just stay on the external website.
I'm developing website with a lot of HTML5 and CSS3 features. I'm also using iframe to embed several content on my website. It works fine if I open it using Chrome/Firefox/Safari mobile browser. However, if I share on facebook (post/page) and I opened it up with Facebook application with Facebook Internal Browser, my website is messed up.
Is there any tools or way to debug on Facebook Browser? Thanks.
This is how you can do the debugging yourself. It's painful, but the only way I've come across so far.
tl;dr Get the Facebook App loading a page on your local server so you can iterate quickly. Then print debug statements directly to the page until you figure out what is going on.
Get a link to a page on your local server that you can access on your mobile device (test in mobile safari that it works). See this to find out your local IP address How do you access a website running on localhost from iPhone browser. It will look something like this
http://192.xxx.1.127:3000/facebook-test
Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)
Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser
Since you don't have a console, you basically need to print debug statements directly to the page so it is visible. Put debug statements all over your code. If your problems are primarily related to CSS, then you can iteratively comment out stuff until you've found the issue(s) or print the relevant CSS attributes using JavaScript. Eg something like (using JQuery)
function debug(str){$('body').append("<br>"+str);}
Quite possibly the most painful part. The Facebook browser caches very aggressively. If you are making changes and nothing has happened, it's because the content is cached. You can sometimes resolve this by updating the URLs, eg /facebook-test-1, /facebook-test-2, or adding dummy parameters eg /facebook-test?dummy=1. But if the changes are in external css or js sheets it sometimes will still cache. To 100% clear the cache, delete the Facebook App from your mobile device and reinstall.
The internal browser the Facebook app uses is essentially a uiWebView. Paul Irish has made a simple iOS app that lets you load any URL into a uiWebView which you then can debug using Safari's Developer Tools.
https://github.com/paulirish/iOS-WebView-App
I found a way how to debug it easier. You will need to install the Ghostlab app (You have a 7-day free trial there, however it's totally worth paying for).
In Ghostlab, add the website address (or a localhost address) you want to debug and start the session.
Ghostlab will generate a link for access.
Copy that link and post it on Facebook (as a private post)
Open the link on mobile and that's it! Ghostlab will identify you once you open that link, and will allow you to debug the page.
For debugging, you will have all the same tools as in the Chrome devtools (how cool is that!). For example, you can tweak CSS and see the changes applied live.
If you want to debug a possible error, you can try to catch it and display it.
Put this at the very top of your code:
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
}
(Source: MDN)
This will catch and alert your errors.
Share a link on Facebook (privately), or send yourself a message on Facebook Messenger (easier). To break the cache, create a new URL every time, e.g. by appending a random string to the URL.
Follow the link and see if you can find any errors.
With help of ngrok create temporary http & https adress instead of your ordinary localhost:3000(or other port) and you could run your app on any devices. It is super easy to use.
and as it was written above all other useful information you should write somewhere inside div element (in case of React I recommend to put onClick on that div with force update or other function for getting info, sometimes it helps because JS in FB could be executed erlier than your information appears). Keep in mind that alerts are not reliable, sometimes they are blocked
bonus from ngrok that in console you will see which files was
requested and response code (it will replace lack of network tab)
and about iFrame.If you use it on other domain and you rely on cookies - you should know that facebook in-app browser blocks 3rd party cookies
test on Android and iOS separately because technicaly they use different browsers
this is kind of a weird issue I'm having with a site's form when viewed on an iPhone5. When somebody fills in the information and tries hitting submit, it refreshes the page with all of the content still on the page but none of the tasks triggering. No errors or warnings are shown. When the user clicks submit again, the form works as intended.. so the first click doesn't seem to be working.
I don't own an iPhone5, but I tried this on both Safari and on my DROID4 (which both worked fine).
The site is built with DotNetNuke version 6, ASP.net, the forms are a module called DynamicForms, though I don't know if that information is needed.
Any help is greatly appreciated.
Your best bet would be to get in touch with the good folks at Data Springs, the creators of the Dynamic Forms module. They provide really good support.
I'm not sure what triggers you have, but that sounds like the browser for the device isn't actually doing the event. As for a potential work around, in your skin but this:
$(function () {
$(".SubmitButtonAnchor").click(function () {
if(window.confirm(location.href)) {
window.location = "http://bing.com";
}
});
});
The above example should anchor to your input button and do the following:
When you Submit it will prompt you of the page it is attempting to navigate to.
The ability to say "Yes" or "No".
Then navigate to the page.
This should bypass some issues you may be experiencing currently, I'd still let them know that it isn't working as intended.
Okay, I'm at my wits end - I can't figure this one out. If you go into Facebook in Safari on a desktop/laptop and in the search bar type the name of my app: "Hopple Hop", and then click on the app itself (not the app page), instead of launching the app, it triggers this error message in Safari:
"Safari can't open "fbrpc://nativethirdparty/f?appid="
Followed by hundreds of characters. Basically, it's a big long URL string, in the "fbrpc://" protocol, and it tries to launch directly into the browser as-is.
As you can imagine, this is not the intended functionality of searching for my app. The intended functionality is that they type "Hopple Hop", click on it, and the Facebook canvas game starts. If you go to
https://www.facebook.com/appcenter/hopplehop/
You can see it there. And if you click "Play Now", it launches properly from:
https://apps.facebook.com/hopplehop/
I know it's probably a configuration issue. There is also an iOS app to go with it.
I'm not sure what the end cause was, to be honest. It appears to be a very specific configuration issue with my phone / Facebook account and the way I've authorized the game. It doesn't seem to be an issue for anyone else. I don't unfortunately know the root cause.
But if anyone else sees this error, it's likely only you are seeing it.
Thanks,
Glen
We are developing an app that makes posts on behalf of our users to Facebook. Within those posts, we want to put links to external (non-Facebook) websites.
Looking at the links in the status bar of the browser (usually Chrome), the correct URL is displayed. However, Facebook seems to wrap the actually-clicked link into some extra bells-and-whistles. Usually, this works correctly.
Sometimes, however, this URL wrapping ends up sending the click to a URL like:
http: //spywaresite.info/0/go.php?sid=2
(added space to make it non-browsable!) which generates Chromes severe warning message:
This happens very occasionally on Chrome, but very much more often in the iOS browser on the iPhone.
Does anyone have any pointers as to how to deal with this?
EDIT
For example, the URLs we put in the link is
http://www.example.com/some/full/path/somewhere
but the URL that actually gets clicked is:
http://platform.ak.fbcdn.net/www/app_full_proxy.php?app=374274329267054&v=1&size=z&cksum=fc1c17ed464a92bc53caae79e5413481&src=http%3A%2F%2Fwww.example.com%2Fsome%2Ffull%2Fpath%2Fsomewhere
There seems to be some JavaScript goodness in the page that unscrambles that and usually redirects correctly.
EDIT2
The links above are put on the image and the blue text to the right of the image in the screenshot below.
Mousing over the links (or the image) in the browser shows the correct link. Right-clicking on the link and selecting "Copy Link Address" gets the fbcdn.net link above (or one like it). Actually clicking on the link seems to set off some JavaScript processing of the fbcdn.net link into the right one... but sometimes that processing fails.
I'm not 100% sure what you're asking here, but i'll tell you what I know:- are you referring to this screen on Facebook?
(or rather, the variation of that screen which doesn't allow clickthrough?)
If you manually send a user to facebook.com/l.php?u=something they'll always see that message - it's a measure to prevent an open redirector
if your users are submitting such links, including the l.php link, you'll need to extract the destination URL (in the 'u' parameter)
If you're seeing the l.php URLs come back from the API this is probably a bug.
If links clicked on facebook.com end up on the screen it's because facebook have detected the link as suspicious (e.g. for URL redirector sites - the screen will allow clickthrough but warn the user first) or malicious/spammy (will not allow clickthrough)
In your app you won't be able to post links to the latter (an error will come back saying the URL is blocked), and the former may throw a captcha sometimes (if you're using the Feed dialog, this should be transparent to the app code, the user will enter the captcha and the dialog will return as normal)
If this isn't exactly what you were asking about please clarify and i'll update my answer
Rather than add to the question, I thought I'd put more details here.
It looks like the Facebook mention in the original title was mis-directed, so I've removed it.
We still haven't got to the bottom of the issue.
However, we used both Wireshark and Fiddler to look at the HTTP traffic between the Chrome browser (on the PC) and Facebook. Both showed that Facebook was returning the correct URL refresh.
Here's what Wireshark showed:
What we saw on Fiddler was that our server is issuing a redirect to the spywaresite.info site:
We are working with our ISP to figure out what is happening here.