iframes open in safari in iOS

Edit Subject

I've encountered the following problem:

When I click on a google maps link inside the webview, the app loads google maps in a browser view, which is undesired in my case. Instead, I only want a special external url to be opened inside the webview.

Altough the feature stay-in-webview is useful, it would be better to be able to decide which external links should be opened in the webview and which should be opened using the default protocol handler of the platform.

Thomas

PhoneGap provides this through the whitelist feature - you specify which domains open in the webview, and which don't.

Right now, PhoneGap Build doesn't have very robust support for this - we enable all domains ('*') by default. We're working on getting more granular controls available through the config.xml file.

in xcode where is tay-in-webview

Or you use the Childbrowser-Plugin to view External Pages "InApp".
IFrames didn't works - The App will go in the background and opens the Safari.

Hi,

I tried, and put <preference name="stay-in-webview" value="true" /> in config.xml that is in the same folder (/www) as index.html, and when i click the link from a different page (to home) where the youtube's iframe embedded video is, it opens safari browser directly on youtube with video.

Cordova 1.6.1

i am using link like this <a href="./index.html" target="_self"> to enforce same view, but removing it does not help.

What am i doing wrong ? My gut feeling is that config.xml is not read as i tried to put orientation preference to landscape and it still opened app in portrait

Hi Alan did you happen to resolve your issue, or is it still plaguing you?

I understanding using the "stay-in-webview" to control linking in comments or in iframe urls to youtube videos. but I want some links to leave the app and some I want to stay in the app. How do I do that?

basically I want a reference to an iframe that is absolute to stay in the app unless I tell it to launch urls from a specific domain outside the app. and same with any other links that are not relative... or I specify a target...

can this be done with build.phonegap?

when will the following be available via the build.phonegap.com config.xml?

http://eisabainyo.net/weblog/2012/01/...

plist params:
MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
*.youtube.com
*.ytimg.com

Hi,

I have managed to resolve my issue to a degree. I have added in the Cordova.plist under External hosts * as my list, and youtube videos started showing properly.

Secondly, i have put open all WhitelistURLs in vebview to yes, however that creates another complication for me (in combination with * for external hosts): all external links (not just ones that are my site but others open in web view and since they have no link back, i cannot go back to my original site(app). Ideally my behavior would be the following:

1. Pages that i refer locally with videos (iframes from youtube) i would like to continue opening in web view.

2. External sites (i.e. i put under links) i would like to open either in Preview(iOS specific), or browser

I have tried setting in ExternalHosts: just youtube.com, and i get whitelist rejection error for some reason and video iframe does not show. Anything else but * and videos do not show - whitelist rejection (at least to my knowledge)

If i remove openAllWhitelistinWebView to no, every time i load LOCAL page containing an iFrame video, it will open browser. which I would like to avoid

If you have any suggestions how exactly to achieve that I would really appreciate it.

Also a question:

Do you support include tags for iphone/ipad ? i.e. for navigation menu so i do not need to copy it many times

Thanks in advance.

Alan

Also i am confused by Phonegap / Cordova naming convention.

I downloaded phonegap, but when installed on iOS it said Cordova 1.6.1. So when you refer to phonegap build i get confused. Could you please explain if it is the same thing or not, and if not what is the difference.

cordova and phonegap are the same. cordova is our apache name (currently in incubator). phonegap will slowly get squeezed out as we refactor/rebrand.

Hi Brett, and thx for the clarification.

Could you please look into my post above the Phonegap / Cordova naming, and if you have provide some comments or suggestion ?

Thx,

Alan

The whitelist and plist is not the only way to define how webviews/preview is opened in iOS.

There is a blogpost on this topic i specified above. The blogpost is at https://build.phonegap.com/blog/acces...

There is some iOS specific info there:

on iOS, if a domain is whitelisted, a link will take over the entire webview, unless the link's target is _blank, in which case it will open in the browser. If it is not, it will log an error on the device, while doing nothing from the user's perspective.

Hi Brett and thanks for the link.

I have read the article, however that does not solve my problem. Or more specifically i have several problems:

1. Why are you referring to whitelist and plist. I know only of Cordova.plist in the Supporting Files folder. Under there i see External Hosts entry, and that is where i presumed whitelist is. If it is different file/location please state filename/path. Thx

2. in the Cordova.plist the default for the "OpenAllWhitelistURLsInWebView" is NO. Assuming i set ExternalHosts in the plist to *, and leave "OpenAllWhitelistURLsInWebView" on default NO, every time i try to load page (local, no external URL i.e. "./professions.html" in the a href field containing an embedded youtube video i.e.:
<iframe width="640" height="360" src="http://www.youtube.com/embed/zd2UdOA59fw" frameborder="0" allowfullscreen></iframe> ...it opens browser with the youtube video inside. (so instead of page with embedded video i get open browser with just video). Only after switching back to the APP on iPad do i see the professions.html page open, and embedded video not working

3. The only way (at least which I found) to have open professions.html in web view as i want it is to set "OpenAllWhitelistURLsInWebView" to YES. (I have tried even to have something like <a href="./professions.html" target="_self" />" which didnt work). However, IF i do that, i have broken behavior for the external links (i.e. <a href="http://www.wikipedia.org" target="_blank" />) i want to have open in the browser since the config param will override the _blank behavior.

Sorry for the big block of text, however I really need help on how to get both to work. The way I see it it could be either iOS setting or an error in iframe handling that forces browser with youtube link.

Please note one thing: IF the page containing embedded video is FIRST PAGE (i.e. index.html), then it loads it normally as it should in web view. However if i click a link in the app to load local page containing the video, then you get behavior listed in 2.

Oh, and the HW is iPad 1, and iOS 5.1.1, and cordova 1.6.1.js

Please let me know if there is a way around it. I need both points in 2 & 3 to work.

I appreciate your feedback.

/Alan

the whitelist i refer to is in the phonegap:build config.xml inside the project you upload to phonegap build. we dont support uploading of the plist to phonegap build.

be aware there is an open issue https://issues.apache.org/jira/browse... regarding the OpenAllWhitelistURLsInWebView.

if these issues are regarding phonegap in general then the google groups or phonegap IRC channel would be your best bet.

Hi all,

Sorry if this has been said before but I have also found a solution to this issue.

In the Cordova/PhoneGap.plist file switch the value of OpenAllWhitelistURLsInWebView to 'YES'

Thanks but I don't want all urls to open in the webview control. They should just expose a method in phonegap.js that lets you preview the url that the browser is about to go to and let you decide in javascript wether you want to let it go or do something different.

you could write that method easily, and it would be preferable for it to be a client method (opposed to a phonegap platform call). in fact for compatibility for iOS and android apps this has to be done explicitly to support how each platform handles child browsers/activity etc.

I could but I want to use the build.phonegap.com build services because they are so easy to compile for all the platforms and I dont have to have a Macbook or a dozen different environments (you know the drill)

so considering that ....I cant :)

by client method i mean a method inside your javascript scripts. that way you could pass all onclick events for links through a catch-all method. this way you can farm out the functionality depending on whether it's for iOS (location.href=blah) or for android (loadUrl(blah)) etc. this won't be incompatible with the build service in any way.

I have an app where 90% of the app is in-app. Meaning that data is loaded into a webview. I have used the stay-in-webview preference in the config.xml for PG Build. Works great except that, now, all clicks open in the webview. This is greate for 90% of my app but there are some links I want to be able to open outside of the app. Setting target = _blank does not do the trick.

I understand that this issue is being looked at for 1.8+ but is there a workaround for this? I am ok with a Javascript solution as long as I know what it should be. Any help is greatly appreciated

target=_blank is only for iOS. to enable this for android you should use the loadUrl method:

/**
* Load the url into the webview or into new browser instance.
*
* @param url The URL to load
* @param props Properties that can be passed in to the activity:
* wait: int => wait msec before loading URL
* loadingDialog: "Title,Message" => display a native loading dialog
* loadUrlTimeoutValue: int => time in msec to wait before triggering a timeout error
* clearHistory: boolean => clear webview history (default=false)
* openExternal: boolean => open in a new browser (default=false)
*
* Example:
* navigator.app.loadUrl("http://server/myapp/index.html", {wait:2000, loadingDialog:"Wait,Loading App", loadUrlTimeoutValue: 60000});
*/


Brett, was the last comment for my post? If so, this is for iOS only. I am not using PGB for Android.

My app makes heavy use of iframe content which works fantastically when using the stay-in-webview preference. However, I have some content which is not suitable to show in-app yet I cannot get that content to show in a new Safari browser window when using this setting.

i recommend asking the phonegap google groups or the IRC channel, as this seems like a phonegap issue, not a phonegap build issue.

Alright, will do.

Does the PGP stay-in-webview property directly relate to the OpenAllWhitelistURLsInWebView attribute used for PhoneGap?

yes

I think the real problem (for me at least) is the use of iFrames. I cannot find anyway to use iFrame content (even within the same domain) unless I set the stay-in-webview property. Unfortunately, that keeps me from being able to open links in a new Safari window (google maps, etc). Andrew Lunny reported this under the Cordova project and it does not look like it will be corrected until 2.0. Really depressing. Does anyone know how to get iFrames to work without using the stay-in-webview option?