I began to learn PhoneGap recently in iOS platform, and I encountered a problem. How can I change the startPage?
I set startPage as follows:
self.viewController.startPage = #"http://www.google.com";
It did not work, and I also tried the following way:
NSURLRequest *request =
[NSURLRequest requestWithURL:[URL URLWithString:#"http://www.google.com"]];
It also did not work.
I do not know how to do this. Is there anyone can help me out?
Here is what I did for my application.
Create a local index.html page as phonegap expects it.
Inside html, set window.location to whatever page you need it to go to.
Here is my index.html:
<html>
<head>
<script> window.location.href='http://www.google.com' </script>
</head>
<body>
<h1 class='loading'> Loading </h1>
</body>
</html>
Note: Make sure you put the http:// in the location otherwise it may consider as relative link.
Try this,
......
......
public partial class MainPage : PhoneApplicationPage
{
//variables…..
public MainPage()
{
InitializeComponent();
PGView.StartPageUri = new Uri(“www.google.com“, UriKind.Relative);
.....
.....
}
Check How to change start page in PhoneGap 1.xstrong text
You can put starting point of application in plist file.
Related
I am working on a Firefox Add, using the newest SDK. The problem I am having, is that when ever I try to run a custom dom function it doesn't work.
Scenario:
The firefox add-on must be able to loop through all tabs, and if the correct one is open based on the title, run a specific function, like: mydom.checkIt();
<!DOCTYPE html>
<html>
<head>
<title>My Web</title>
</head>
<body>
<script>
mydom = {};
mydom.checkIt = function (){
alert('Hi');
};
</script>
</body>
</html>
Then the add-on source code would be something like:
var tabs = require('sdk/tabs');
for (let tab of tabs)
{
if(tab.title=='My Web')
{
tab.activate();
}
}
tabs.on('activate', function(tab) {
tab.attach({
contentScript: "if(typeof(mydom)!=='undefined')mydom.checkIt();else console.log('no defined');"
});
});
But this doesn't work and it says always: "no defined"
Any ideas?
You have to get into the dom js scope with unsafeWindow or wrappedJSObject. So contentWindow.wrappedJSOBject.checkIt() works from bootstrap addon (not sure about sdk)
Warning though, this may not be e10s friendly and we should find a way to support that
After building a Google Dart web app in Dart Editor (the Pub Build (Generates JS) option) the folder layout is like this. My app imports both dart:html and dart:async but It seems I can upload everything but the $sdk folder to my server and the app will run fine in both Dartium and in other browsers. Is there some reason I need to upload the $sdk folder, and what is it for? Tried googling but I see no answer, thanks in advance!
Edit: Here's a working example of my project from DartEditor 1.5.8 and below is the code for it.
hexclock.dart:
import 'dart:html';
import 'dart:async';
DateTime theTime;
String theHour, theMinute, theSecond;
Timer theTimer;
void main() {
theTimer = new Timer.periodic(new Duration(seconds: 1), getTime);
}
void updateColours(){
String bgcol = "#" + theHour + theMinute + theSecond;
querySelector("body").style.backgroundColor = bgcol;
}
void printTime() {
querySelector("#hour").text = theHour;
querySelector("#minute").text = theMinute;
querySelector("#second").text = theSecond;
}
void getTimeInit(){
theTime = new DateTime.now();
theHour = "${checkZero(theTime.hour)}";
theMinute = "${checkZero(theTime.minute)}";
theSecond = "${checkZero(theTime.second)}";
printTime();
updateColours();
}
void getTime(Timer t){
theTime = new DateTime.now();
theHour = "${checkZero(theTime.hour)}";
theMinute = "${checkZero(theTime.minute)}";
theSecond = "${checkZero(theTime.second)}";
querySelector("#title").style.opacity = "0";
querySelector("#clock").style.opacity = "1";
printTime();
updateColours();
}
String checkZero(int anInt){
if (anInt < 10)
return "0${anInt}";
else
return "${anInt}";
}
hexclock.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HexClock</title>
<script async type="application/dart" src="hexclock.dart"></script>
<script async src="packages/browser/dart.js"></script>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="hexclock.css">
</head>
<body>
<div id="title" class="centre">hexclock</div>
<div id="clock" class="centre">#<span id="hour"> </span><span id="minute"> </span><span id="second"> </span></div>
</body>
</html>
pubspec.yaml:
name: HexClock
description: A sample web application
dependencies:
browser: any
In the pub source code I found this:
// "$sdk" is a pseudo-package that allows the dart2js transformer to find
// the Dart core libraries without hitting the file system directly. This
// ensures they work with source maps.
var libPath = path.join(sdk.rootDirectory, "lib");
var sdkSources = listDir(libPath, recursive: true)
.where((file) => path.extension(file) == ".dart")
.map((file) {
var idPath = path.join("lib",
path.relative(file, from: sdk.rootDirectory));
return new AssetId('\$sdk', path.toUri(idPath).toString());
});
I don't know if this matches exactly what you're seeing, but my guess is that it's related. This would in theory allow client-side debugging even through SDK functions, which could be very useful.
Basically the entire build folder is intended to be deployed.
There are some redundant files like the *.dart.pecompiled.js which are only necessary for CSP environments (Chrome App for example).
I think there was a recent change so that these files are not generated anymore.
There might be other things redundant too but I haven't seen any information about it yet.
You could try with a Dart 1.6 release (stable should be out) and check if this was dropped or if there has to be another explanation.
I use always bleeding_edge which is currently 1.7+.
Another explanation is that this is only created when you build in debug mode.
DartEditor does this by default.
Try pub build from the command line to see if it is still generated.
So I was using trigger.io to create a page where there's a custom menu at the bottom and each button loads an external HTML page into main container. I had to hack around to make this work so I was wondering if there's a better way of doing it.
I started using the $('.main').load('pages/test.html') and it doesn't work. Instead I had to do:
forge.file.getLocal('pages/test.html', function (file) {
forge.file.string(file, function (str) {
$('.main').html(str);
});
});
which is kinda messy.
Also if the str HTML content as a img tag, the img doesn't show since the src attribute gets messed up. So I had to do another hack:
forge.file.getLocal('pages/test.html', function (file) {
forge.file.string(file, function (str) {
var $main = $('.main');
$main.html(str);
//Hack to resolve img src
var imgPath;
$main.find('img').each(function () {
var $this = $(this);
// First 8 chars is "file:///"
imgPath = $this.prop('src').substr(8);
forge.file.getLocal(imgPath, function (file) {
$this.prop('src', file.uri);
});
});
});
});
Any better way of purely loading an external HTML page without all the hassle?
Thanks!
Testing with forge platform v1.4 (at the time of writing, v1.4.18) on Android 4.1 and iOS (both the iPhone simulator and an iPad), I seem to be able to use jQuery's load method without any extra effort. Here's the structure for my testcase:
src/
index.html
face.png
pages/
hello.html
Here's the contents of index.html
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('.content').load('pages/hello.html');
});
</script>
</head>
<body>
<div class="content">
</div>
</body>
</html>
And pages/hello.html:
<b>hello world</b><img src="face.png">
Which resulted in this just after app launch:
One gotcha I can see with this approach is that the src attribute for the img tag had to be relative to index.html. If you're still having problems then a more specific testcase and/or details of forge platform version used as well as what devices/simulators you tested on might be useful.
I want to redirect to another page in Phonegap.
I have written the following code in javascript but it is not getting redirected:
window.location.href = "http://www.google.com";
Can anyone advise why it is not working?
You have to allow navigation of external sites inside your application by configuring the whitelist.
You have to use allow-navigation tag like this:
<allow-navigation href="http://www.google.com/*" />
Try doing the following:
Open your file Cordova.plist file
Right click on ExternalHosts -> Add Row
Set the String value of the new added row to *.
So, you should have your new added row like this:
Item0 String *
Normally, you should replace * with the external URL that you want to provide access to (like http://www.google.com for instance), but I used * to make sure that the problem comes from there or not.
For more information, check the "Domain Whitelist Guide" section of the online doc: http://docs.phonegap.com/en/2.1.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide .
Here's a simple working example using window.location.href:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8">
function init() {
window.location.href = "http://www.google.com";
}
</script>
</head>
<body onload="init();">
</body>
</html>
Let me know if this works.
Most likely it's the page you are moving to. Does that page have the phongap.js files in it etc?
Try a simple test: create a new HTML page with just the basic elements and a couple words in the body so you know you are there. Save it as test.html. Now try window.location="test.html".
If that works then you know it's something in the new page.
Good luck!
Have you checked your framework initializations? Make sure jquery and phonegap are completely loaded before you try to change the page. Or else phonegap will hang and break.
Take a look here: Correct way of using JQuery-Mobile/Phonegap together?
Working fine for me with Cordova 4. Can you try remote debugging with Google Chrome and see what happen in the Javascript console?
Try without href:
window.location = "http://www.google.com";
if you use like window.location or window.location.href and it stll doesn't work in IOS or safrai.
you can use this:
var isAndroid = !!navigator.userAgent.match(/android/ig);
var targetUrl = 'your url';
window.location = targetUrl;
if(!isAndroid) {
var doc = window.document,
ifr = doc.createElement('iframe');
ifr.src = targetUrl;
ifr.style.cssText = 'display:none;';
doc.body.appendChild(ifr);
}
I'm writing a MVC web app in ASP.NET MVC, which is supposed to be serving up a Flash object written by one of my colleagues. I don't know any Flash; he doesn't know any C#/ASP.NET; hence the question goes to SO!
The code on my web page looks like this:
<head>
(blah blah blah...)
<script type="text/javascript" src="/FlashStuff/js/swfobject.js"></script>
<script type="text/javascript">
var GP_MLM_flashvars = {};
GP_MLM_flashvars.remote = 'true';
GP_MLM_flashvars.streamprovider = 'localweb';
GP_MLM_flashvars.referer = '';
GP_MLM_flashvars.bgcolor = '#000033';
var GP_MLM_params = {};
GP_MLM_params.menu = 'false';
GP_MLM_params.allowFullScreen = 'true';
GP_MLM_params.salign = 'tl';
GP_MLM_params.scale = 'noscale';
GP_MLM_params.wmode = 'opaque';
GP_MLM_params.bgcolor = '#000033';
var GP_MLM_attributes = {};
GP_MLM_attributes.id = 'GP_MLM';
GP_MLM_attributes.name = 'GP_MLM';
swfobject.embedSWF('/FlashStuff/swf/GP_MLM.swf', 'GP_MLM', '100%', '100%', '9', '/FlashStuff/expressInstall.swf', GP_MLM_flashvars, GP_MLM_params, GP_MLM_attributes);
</script>
</head>
(etc.)
When I debug this page using the VS Development Server, it all appears very happily and works fine. But if I try to debug using my local IIS (7.5) server, the Flash object doesn't get loaded.
I'm guessing I need to do something on IIS to enable using the Flash object - but what?
EDIT: Problem partially solved; the clue came from the "404" error (thanks #Beliskner).
It appears that when you're running under the VS Development Server, your root folder is the project folder, and in my case "/FlashStuff" comes directly off my project folder, so that worked fine.
But when you run off the IIS server, the root folder is the Default Web Site (or whatever site you're using). Now, with a project URL set to "http://localhost/MyTestApp", I have to prefix all my paths with "/MyTestApp", e.g.:
<script type="text/javascript" src="/MyTestApp/FlashStuff/js/swfobject.js"></script>
Changed all the paths; works fine now.
This is a pretty ugly situation now, though - because I am now hard coding deployment-specific information into my app! So if I decide to deploy my app onto an IIS server in a folder called "MyLiveApp", I have to go around changing the file references everywhere! And if I want to debug it - then what? Go changing all the references back to "MyTestApp"?
Obviously I'm not the first developer to come up against this situation, and it is unthinkable that you have to do what I'm saying above. So what is the trick for dealing with this situation?
Have you setup the IIS MIME types? Have you used firefox firebug to check the request isn't 404ing?
Mime types
http://technet.microsoft.com/en-us/library/cc725608(WS.10).aspx - I suggest using the GUI
Extension: ".swf"
Type is: "application/x-shockwave-flash"
Firebug
Firebug network monitor: http://getfirebug.com/network
Edit
Use this to solve your problem: http://www.dailycoding.com/Posts/the_script_tag_runatserver_problem_solution_using_resolveurl.aspx
Try embedding the Flash object in the body of your html page
<head> (blah blah blah...)
<script type="text/javascript" src="/FlashStuff/js/swfobject.js"></script>
</head>
<body>
<script type="text/javascript">
var GP_MLM_flashvars = {};
GP_MLM_flashvars.remote = 'true';
GP_MLM_flashvars.streamprovider = 'localweb';
GP_MLM_flashvars.referer = '';
GP_MLM_flashvars.bgcolor = '#000033';
var GP_MLM_params = {};
GP_MLM_params.menu = 'false';
GP_MLM_params.allowFullScreen = 'true';
GP_MLM_params.salign = 'tl';
GP_MLM_params.scale = 'noscale';
GP_MLM_params.wmode = 'opaque';
GP_MLM_params.bgcolor = '#000033';
var GP_MLM_attributes = {};
GP_MLM_attributes.id = 'GP_MLM';
GP_MLM_attributes.name = 'GP_MLM';
swfobject.embedSWF('/FlashStuff/swf/GP_MLM.swf', 'GP_MLM', '100%', '100%', '9', '/FlashStuff/expressInstall.swf', GP_MLM_flashvars, GP_MLM_params, GP_MLM_attributes);
</script>
(etc.)
</body>
I guess embedSWF is a javascript function to write out the object tag
Yes, you need to add swf as a IIS 7 mime type per site.
I had this same issue with .mp4 files