In my cordova inappbrowser app, pdfs can be downloaded by calling a RESTful service that streams the content to the user's browser (see html snippet below). This works fine on iOS and using Google Chrome directly on Android but not when doing it through cordova inappbrowser. Clicking on the link doesn't do anything. I've tried many of the suggestions here including using gview but no result.
The tag in html is an href (I tried using window.open as well) that evaluates to something like https://xxx/member/get_pdf/217521359ashr868af6as. Using target='_blank' (tried _system also)
where the value after get_pdf is a guid (value above is not the real guid)
The google viewer workoaround that many people propose works fine with a physical pdfs but my files are streamed back from the service above and gview doesn't recognize it as a pdf and shows error 'preview not available' and its not an option to store them physically. Is there some specific header to set to make gview recognize the streamed response as a pdf? I set content_type, Content-length, tried adding Content-disposition with a filename also. No go.
Any suggestions appreciated.
Thanks,
Patrick
Related
I'm working on a URL preview widget, so I'd like to extract the meta tags from the HTML of a given URL.
However, the problem is that websites like Twitter don't return the entire HTML when they detect there's no JavaScript engine enabled (i.e. doing a GET request from the http package).
So, I'd like to know if there's any workaround for these cases, for example, using some kind of headless browser to get the entire HTML.
Thanks!
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
I'm Developing an App using Phonegap, target Devices are Android or iOS driven. My Problem is, that on the iPhone I can only set the "open all whitelist urls in webview" parameter to true or false. So that is the Problem:
Expected Result:
- All links (like www.google.com, www.stackoverflow.com) should open in the Browser
- An embedded iFrame with a Youtube Video should open in the Webview
Result with "OpenAllWhitelistUrlsInWebview" Set to true
- All links and iFrames will open in the Webview
Result with "OpenAllWhitelistUrlsInWebview" Set to false
- No links and iFrames will open in the Webview
How can i specify which links should open in the Browser and which shouldnt? When i remove an url from the whitelist the link won't open at all and also setting target="_blank" wont work properly. Trying it with window.open didn't work either.
Thank you very much for every idea.
Implemented this over the weekend, and it's working great:
http://www.rigelgroupllc.com/blog/2012/05/22/opening-links-in-phonegap-apps-in-mobile-safari/
This will allow you to set up your plist for the youtube video, while using the above method to open specified links in the external browser.
I'm not sure what/if you need to do anything in Android.
I have exported an event in the .ics format from iCal and linked to the file from an event site i am creating.
When i navigate the link in Chrome on my MacBook it correctly opens iCal and subscribes to the event.
However when i navigate to the same page in iPhone Safari and navigate the link it retrieves an error where it says it cannot subscribe to the calendar.
Am unsure as to why it is working in one and not the other:
http://tfma2012.valtechdigital.co.uk/
The calendar location is as follows:
webcal://tfma2012.valtechdigital.co.uk/calendar/TFMA.ics
Instead of using "webcal://" as the address, simply use "http://"; it worked perfectly for me on both my Mac and iPhone when I tried that.
Just put this code and check
[[UIApplication sharedApplication]openUrl:[NSUrl urlWithString:[NSString stringWithFormat:#"webcal://tfma2012.valtechdigital.co.uk/calendar/TFMA.ics"];
If you use http:// so usage of Content-Type: text/calendar HTTP header considered (Not tested) personally You can use same page name with text/html header for desktop browsers to show "how to" manual.
If you use webcal:// it is also well supported on iOS, the header must be Content-Type: text/calendar (Tested, works on iOS 13)
You can go even further and show url like webcal://example.com/schedule/?staff_id=1245 encoded in QR code. On camera mode iOS device will suggest you to subscribe to the iCalendar feed.
Most likely the link is just outdated. Open your calendar, turn off the public link and turn it on, the new address will work 😉
I've recently got into using FireBreath for some simple task: download a clicked url. Is there a built-in method or something else with which i can add the url to Chrome's native download queue? or at least load up a Save Link As.. dialog (that would be ok too)?
You can show a save dialog by using the native OS calls to do so; for example, on the Mac you'd use NSSavePanel. That won't hand the download off to the browser though, it would just give you a user-selected filename to download to. You'd still have to do the download yourself.
NPAPI doesn't have a way to tell the browser to start a download using its UI. That would be something that would be an extension API if it existed (and what you'd want to file a request for if it didn't), not part of NPAPI.
Send the following HTTP header along with the content.
Content-Disposition: attachment
Optionally with ; filename="filename here".
If you want to download a clicked URL with FireBreath then you're not going to get a download dialog; if you need a download dialog, why are you using FireBreath?
The easiest way to get a download dialog is to set window.location to the URL you want to download and wait for the browser to pop the dialog up itself; you can do this with FireBreath or with javascript, it works the same way.