How can I display a Facebook like box in PhoneGap in the same WebView / page as the remaining web application? I want to display a Facebook like box in a PhoneGap application (using jQuery Mobile).
PhoneGap opens a new browser window / webview for the Facebook like box.
Same situation with other Facebook social plugins. I want the like box to be part of the normal content on that page, not open a childbrowser or so. Either of both variants (FBXML [1] & iframe [2]) displays nicely in the same page on desktop browsers, but PhoneGap opens them in a new window, thereby leaving the application.
Any suggestions?
[1]:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="true" border_color="" stream="true" header="true"></fb:like-box>
[2]:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe>
Openeing iframes requires the domain to be added to the ExternalHosts key in PhoneGap.plist. Then the external page like Facebook show up in the normal content.
"You'll have to add the domain under the ExternalHosts key in PhoneGap.plist." link
Related
Trying to display a PDF in an iframe, it works perfectly on desktop view, but when I try to load it from Tablet or Mobile it does not display. The body element of the iframe then says "no enabled plugin supports this MIME type". I can, however, load the PDF on desktop view then change to tablet or mobile and it will display. Any ideas on how to get it to load on the tablet and mobile views?
Here's the iframe:
<iframe id="documentObject" name="documentIframe" src={fileSrc} title={fileName} height="100%" width="100%" />
I am currently working on a PaaS (platform as a service) where frontend can be developed using html5 (yes, I am limited to using vanilla js)
I must show within an html document an external web application that belongs to me, either using iframe or some other alternative and guarantee that this external app is fully functional while being embedded within the page.
The problem I am currently having is that with "iframe" or with alternatives such as "embed" or "object" you cannot navigate beyond the page that is brought up through the url, for example you cannot exit the page login embedded in an iframe, when I try to login the page in the iframe it just restarts.
here some examples:
<iframe src="url_to_myapp" width="100%" height="500" frameborder="0"
allowfullscreen>
<embed src="url_to_myapp" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle"
allowScriptAccess="sameDomain" allowFullScreen="true">
Is it possible to navigate between different pages of the same website or through the internet using an iframe? If not, is there an alternative in html5 where it is possible to show an embedded page inside another and navigate through it?
thank you, greetings
By using webview, I am able to show pdf in iOS, but in android it always shows white screen.
I am using webview to show pdf in my mobile app. In iOS it works fine but in android, it keep on showing white screen. I know there are some packages like react-native-pdf which can do this, but I want to do it through webview. Is it possible if yes then how?
<WebView
source={require('./android/app/src/main/myPdf.pdf')}
/>
It should show pdf in android app, but it is showing white screen everytime.
Via Webview (Android) is not possible to embed a "./...pdf" URL directly.
You can load the PDF in an external PDF manager (ex. Google Docs) and use that URL.
I'm adjusting a website with twitter bootstrap display for mobile devices, I'm trying to add a button like this one, so that when a user would click on it, it would open up "google maps" or "Apple maps" with the address respectfully.
How can I go about achieving this?
I'm currently using google maps html embed snippet, like this.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405691.57240383344!2d-122.3212843181106!3d37.40247298383319!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA%2C+USA!5e0!3m2!1sen!2sca!4v1450487299459" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
however end user need to copy and paste the address on his phone, and its time consuming.
Any ideas?
Thanks
I have a new smart phone and simply using the content from the link "View Larger Map" the one provided by Google inside the Google iframe automatically calls a navigation request and I can then select Google Maps and then set as default to it always does this.
simply enclose inside
I'm on Android 5.1, but I bet it works on IOS.
Give it a go, it worked for me :-)
I use UIWebView in my app. And only one site load without css styles (only mobile version, with desktop all alright). I try load this site in Safari on my iOS device, all good. There is problem only with webView.
Doesn't help load with UIWebView LoadRequest method or transition to this page from full version of site.
Source code of this site has tag <noscript> and text from this tag shown on this webview.
It's look like something don't let download all scripts and styles, because in Chrome I looked source code of full loaded mobile site and it has more scripts, then page in WebView.
Moreover, I tried change UIWebView to the WKWebView, the problem remained. Also I use Xamarin.Forms and tried Forms.WebView - nothing. Is it a problem with code of site?