I found a couple of examples on the internet that I tried, to no avail. One of them was:
function openUrl(url) {
window.plugins.childBrowser.showWebPage(url);
}
It seem that my app stopped after reaching the 2nd line.
Looking forward to some guidelines.
45 Answers, 1 is accepted
window.plugins is undefined :(
Also not sure how to reference the plug in. I tried like this:
<script type="text/javascript" charset="utf-8" src="Plugins/Child Browser/childBrowser.js"></script>
Here is documentation how to add plugins http://docs.icenium.com/icenium-mobile-app-development/working-with-frameworks/apache-cordova/apache-cordova-plugins
Here is documentation for the plugin we have : https://github.com/alunny/ChildBrowser/blob/3.0.4/README.md
@Martin: Do not forget that iOS paths are case sensitive. The right include is
<
script
src
=
"Plugins/Child Browser/childbrowser.js"
></
script
>
Shout if you have any other issues.
Regards,
Evgeni "Zammy" Petrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
I am including it like this:
<script src="cordova.js"></script>
<script charset="utf-8" src="plugins/Child Browser/childbrowser.js"></script>function onDeviceReady() { window.plugins.childBrowser.showWebPage("http://www.google.com"); } When run in the simulator (iOS and Android) it gives me this on the console: Uncaught TypeError: Cannot read property 'childBrowser' of undefined
on the above-mentioned call. How to fix that?
As I mentioned iOS is case sensitive. The path that you posted is slightly incorrect - it should be "Plugins/Child Browser/childbrowser.js".
Unfortunately, plugins are currently not supported in Simulator - you can only work with them on a real device. We'll be working on improving this experience in the future.
If you have any other problems or suggestion, don't hesitate to write us back.
Evgeni "Zammy" Petrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
I was close to getting mad about this ;-)
In general it is good to know what the limits of the simulator are. I should have realized to try on a real device. A call to a plug-in function also breaks any code that comes after the call to that plug-in function.
Here's what you'll see in the simulator console:
Error: Failed to load resource -- http://local/Plugins/Child%20Browser/childbrowser.js
FYI: window.plugins.childBrowser is undefined if you call it before Cordova is initialized. Also, here's a sample project that might help others out there: https://github.com/Icenium/sample-childbrowser
Please advice me ...
The sample childbrowser demo is fully runnable as is and you can compare it with your project for differences. Make sure you have added reference to Cordova js file prior the reference to the childbrowser plug-in i.e.:
<script type=
"text/javascript"
charset=
"utf-8"
src=
"cordova.js"
></script>
<script type=
"text/javascript"
charset=
"utf-8"
src=
"Plugins/Child Browser/childbrowser.js"
></script>
Nevertheless our recommendation is to use the new InAppBrowser that is available out-of-the-box with latest Icenium release when choosing Cordova 2.4.
Useful Links:
Cordova InAppBrowser Documentation
Icenium sample app for InAppBrowser
Steve
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.
P.S. My latest Icenium Graphite throws this error when clicking on the "Clone > Sample Projects" menu option: "The sample projects cannot be loaded. Please make sure that you are connected to the Internet." This is obviously a false positive since Graphite won't even load without being connected to the Internet and you can manually paste https://github.com/Icenium/sample-in-app-browser.git into the "Repository Uri" and click "Ok" and the project loads fine.
Screenshot: https://www.box.com/s/uvvqy6chuxf0uedgsdjx
Thanks for the heads up, we noticed this problem as well and narrow it down to changes in the github API. You can use Mist for the time being where listing the samples still works.
Greetings,
Steve
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.
I see you are calling the functions for each button from main.js but nothing happens when I click each button.
I moved the main.js contents under a <script> tag in the index.html to test it in Xcode...and neither work.
I am attempting to test this using your sample-in-app-browser download from GitHub.
Can you explain what I am doing wrong?
We tested both samples and when deployed using Icenium everything works as expected. Could you please share more information about the devices you test on and create a jsbin with the code that causes your issue, if its different from the one used in our samples. Do you use Icenium to build and deploy the project or Xcode?
Regards,Kristian D. Dimitrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.
Does not work since 1.5 - check your own samples - not working
We've tested both in the Icenium simulator and on actual device and the sample-in-app-browser demo is working as expected. You can find a video of our observations here. As explained before, the sample-childbrowser demo would not work in the simulator and you need to run it on actual device. If it fails on real device, please share more information about the devices you test on.
All the best,
Steve
the Telerik team
Don't miss the Icenium May Release Keynote - sign up now!
Share feedback and vote for features on our Feedback Portal.
HTML: There is no project item on that location.
This was not the case prior to the upgrade.
Also I thought I read somewhere that the browser now works in simulator? Your inAppBrowser example does not?
Thanks for the clarification - you can safely ignore that error, we would fix it for the next version of Icenium. Even though it is marked as invalid path, if you build and deploy the childbrowser sample on a real device, it would work as expected.
With the update to Cordova 2.4, you are now able to use the InAppBrowser. I've posted this info in previous post in this thread.
Kind regards,
Steve
the Telerik team
Don't miss the Icenium May Release Keynote - sign up now!
Share feedback and vote for features on our Feedback Portal.
Yes, the observations posted before are recorded while using the sample-in-app-browser demo in the Graphite simulator.
Kind regards,
Steve
the Telerik team
Don't miss the Icenium May Release Keynote - sign up now!
Share feedback and vote for features on our Feedback Portal.
The two that I tried are:
https://github.com/Icenium/sample-childbrowser.git
https://github.com/Icenium/sample-facebook-api.git
Thank you for the feedback, we would consider applying some kind of warning/awareness as you suggest.
Regards,
Steve
Telerik
Don't miss the Icenium May Release Keynote - sign up now!
Share feedback and vote for features on our Feedback Portal.
Thanks!
Currently there isn't a way as the built-in Icenium Cordova plug-ins are native (i.e. Objective C or Java code) and are compiled on our cloud service that you don't have access to. We're however working on support for custom pluginstall-compatible Cordova plug-ins for the next update of Icenium at the end of June. Then you would be able to add the ChildBrowser plug-in as custom plug-in and customize it as you find fit.
On a side note, you might take a look at the built-in Cordova InAppBrowser, which might be a better fit for your application.
Regards,
Steve
Telerik
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
Thanks!
Yes you can hide the URL by specifying the location option as third argument of the open method e.g.:
window.open("http://icenium.com", "_blank",'location=no');
Regards,
Steve
Telerik
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.
Thanks!
That is exactly what is happening when you use that code, only the url bar is removed, the bar with the Done button is still present and allows you to return.
Regards,
Steve
Telerik
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.
window.open(url, '_blank', 'location=no');
It hides all the location bar, it just shows the content of the url. I am using cordova 2.4.0 and testing on a Samsung Galaxy S3 with Android 4.1.2.
Thanks!
I've somehow assumed (thought you've specified) you're using iOS device, where this code behaves exactly as I described earlier. Just tested on Android and indeed the whole address bar disappears along with the Done button. This difference in behavior is inherent to Android and Cordova and there is nothing that can be done to avoid it at this point. Hitting the Android back button (be it software or hardware) returns to your app.
Regards,
Steve
Telerik
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.
Thanks Steve for your help!
- Tom
Yes, please. Be very clear about this. I've wasted 2 days searching around Stack Overflow, here, PhoneGap docs, and Cordova Docs, just to discover that in app browser does not work in the simulator.
Childbrowser is deprecated since Cordova 2.9 and one should use InAppBrowser instead. InAppBrowser is supported in the Icenium simulator, with the only "difference" it opens windows outside of the simulator, instead of "browser" inside the app, which is much more trickier to implement.
Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
Just so that I'm understanding this correctly:
I can use InAppBrowser in the simulator, but it will display a new window as a pop-up page. If I test on my physical device (iOS or Android) then the page will appear within application, correct?
I suppose the only issue I have at this point would be appending my header and footer to that external page.
Yes, your understanding is correct. In general InAppBrowser does not have any context to the main app, so applying your app's header/footer is not possible, and quite frankly that is outside of the goals that InAppBrowser is created for.
Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
What do you think would be my best approach in that case? I'm trying to navigate to an external URL within my app, while maintaining my header and footer on the page, so that I can navigate back within my application.
ie - no sense in rewriting a merchandise page if we already have it done on the desktop version of the site.
"Ability to set position and heigth/width for the InAppBrowser UIWebView so that you could make it look as if you are still in the app "
What is the alternative? If you navigate to an external URL, are you forced to use the device's default browser, and navigate outside of the app?
Quite frankly I am not sure how being able to specify location of the InAppBrowser would make it more "look as if you are still in the app", but I am all in for extending the scarce functionality of InAppBrowser. Currently (only for iOS) you can specify presentationstyle option that when set to
pagesheet
or formsheet
would not occupy the full screen and would probably come close to your desired look.Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
I'll look into presentation style.
What do developers generally do, in terms of navigating to external pages? Is the common scenario to launch an external browser, then when the browser is closed, automatically resume the app?
Thanks.
@Dave: what do you do when you navigate to external page from a web app? It is pretty much the same user case.
@JD: Yes, I've mentioned that it is iOS only unfortunately in my reply.
Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
I've connected my links via event handlers:
HTML page:
<!-- NAV BAR
================================================== -->
<div data-role="footer" data-id="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a id="blog">Blog</a></li>
<li><a href="#games-page" data-transition="slide">Games</a></li>
<li><a id="music">Music</a></li>
<li><a href="#about-page" data-transition="slide">About Us</a></li>
<li><a id="art">Art</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Code Behind:
var self = this
var doc = document;
var blog = doc.getElementById('blog');
var music = doc.getElementById('music');
var art = doc.getElementById('art');
blog.addEventListener( 'click', self._openBlogPage, false);
music.addEventListener('click', self._openMusicPage, false);
art.addEventListener( 'click', self._openArtPage, false);
_openBlogPage: function() {
window.open("http://icenium.com", "_blank");
},
This loads a new external page within my app, along with a footer with a back button so that I can navigate back to my app.
Update: So I was able to deploy to my iOS device today, I hadn't realized how easy it was before. Excellent work on the part of the Icenium team.
I'm able to open an external page within my app by using:
<li><a href="http://google.com" rel="external">Google</a></li>
and it displays fine. Just working on finding a means to navigate back from that page now.
---------------------------------------
@Steve,
I look at apps like Feedly, Facebook, or Twitter on iOS, and when you click on a link to an external URL, they use the browser within the app, and still have the app's chrome (header / footer) surrounding the page.
Is something like that possible with Cordova? I assumed it would be a pretty common/useful feature, but I've only recently started doing mobile development where I have the need to navigate to external URLs.