I am developing a test app in PhoneGap build. Currently I'm trying to redirect to a page when the app loads. But when I tried to do that, it is not redirecting, instead staying in index.html page only. I am using TestObject for testing the app.
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8">
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady() {
alert("Device is ready");
}
</script>
</head>
<body onload="init();">
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
Hai welcome to my app
</body>
</html>
config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.mydomain.mobileApp"
versionCode = "1"
version = "1.0.0" >
<!-- versionCode is Android only -->
<!-- version is in major.minor.patch format -->
<name>My App</name>
<description>
An example for phonegap build app which wont show up in the playstore.
</description>
<author href="https://YourWebsite.com" email="yourEmail#goesHere.com">
Name Of The Author
</author>
</widget>
When I test this in browser, on clicking button it will redirect to http://google.com. But when I upload the apk (build from phonebuild) and upload to TestObject, button is coming. But on clicking it nothing happens. When I test the app,I'm getting like this.
Can anyone help me to find the issue. Thanks in advance.
You need to include cordova in your application
and try this one as well
document.addEventListener("deviceready", function(){
alert("Device ready Fire");
},true);
Include phonegap.js in head section of HTML file and do not make the click event handler inline. Register the event handler in script part. And also make sure you have included whitelist plugin. Try following code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript">
function myFun(){
document.getElementById("myBtn").addEventListener("click", function(){
location.href='http://google.com';
});
}
</script>
</head>
<body onload="myFun()">
<button id="myBtn">Go to Google</button>
Hai welcome to my app
</body>
</html>
Related
I'm trying to create a HTA application, that can open programs(exe, bat etc..) locally on the computer.
This will be used on a Kiosk PC, where the users don't have access to the desktop etc.
But have some problems, with finding a script that works..
Right now I'm using this script:
<script type="text/javascript">
function runApp(which) {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run (which,1,true);
}
</script>
And this is how my links looks:
<a
href="javascript:window.location.href=window.location.href"
onclick="runApp('file://C:/Tools/program.exe');parent.playSound('assets/sounds/startsound.mp3');"
onmouseover="playSound('assets/sounds/hover.wav');"
unselectable="on"
style="cursor: hand; display: block;">Start Program
</a>
The problem with this script, is that some of the programs I open from the launcher HTA are placed below the HTA app that runs in fullscreen.. So I need to ALT+TAB to switch to them..
I have been searching for another script, and found this HTA sample, which looks like a better way to do it:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<HTA:APPLICATION
APPLICATIONNAME="Open link with chrome browser"
BORDER="THIN"
BORDERSTYLE="NORMAL"
ICON="Explorer.exe"
INNERBORDER="NO"
MAXIMIZEBUTTON="NO"
MINIMIZEBUTTON="NO"
SCROLL="NO"
SELECTION="NO"
SINGLEINSTANCE="YES"/>
<META HTTP-EQUIV="MSThemeCompatible" CONTENT="YES">
<title>Test HTA</title>
<SCRIPT LANGUAGE="VBScript">
'************************************************************************************
Option Explicit
Function Executer(StrCmd)
Dim ws,MyCmd,Resultat
Set ws = CreateObject("wscript.Shell")
MyCmd = "CMD /C " & StrCmd & " "
Resultat = ws.run(MyCmd,0,True)
Executer = Resultat
End Function
'************************************************************************************
Sub window_onload()
CenterWindow 400,320
End Sub
'************************************************************************************
Sub CenterWindow(x,y)
Dim iLeft,itop
window.resizeTo x,y
iLeft = window.screen.availWidth/2 - x/2
itop = window.screen.availHeight/2 - y/2
window.moveTo ileft,itop
End Sub
'************************************************************************************
</script>
</head>
<p>Links :</p>
<ol>
<li>EXE test</li>
<li>Bat test</li>
<li>Chrome App Test</li>
</ol>
<BODY>
</body>
</html>
The problem with the script, is that I need to use:
<meta http-equiv="X-UA-Compatible" content="IE=9">
And If I add it to the sample above, it breaks and show me this error when I run the HTA:
An error has occured in the script on this page. Line: 46 Char: 31
Error: Expected ";" Code: 0
So looks like something breaks, with this linie and char 31 is: Call Executer
<li>EXE test</li>
If I don't use IE=9 on my HTA program launcher app, I get lots of error with the jquery that I use.
I have no prior experience with hta, vbs and only a little java.. So I have to use whatever scripts I can find.
Can anyone tell me, why this don't work with IE=9 content tag?
Please refer to the following sample code to launch app using HTA:
<html>
<head>
<title>Application Executer</title>
<HTA:APPLICATION ID="oMyApp"
APPLICATIONNAME="Application Executer"
BORDER="no"
CAPTION="no"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
SCROLL="no"
WINDOWSTATE="normal">
<script type="text/javascript" language="javascript">
function RunFile() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/system32/notepad.exe", 1, false);
}
</script>
</head>
<body>
<input type="button" value="Run Notepad" onclick="RunFile();"/>
</body>
</html>
More detail information, your could check
How to execute a Local File using HTML Application?
Below is my markup in index.html
<html>
<head>
<title></title>
<link href="Styles/Style.css" rel="Stylesheet" />
<script src="Scripts/jquery-2.0.3.js" type="text/javascript"></script>
<script src ="Scripts/MyScripts.js" type="text/javascript"></script>
<script src="Scripts/cordova.js" type="text/javascript"></script>
</head>
<body>
<div id="test">Hello</div>
</body>
</html>
And Below is my script
window.onload = function () {
alert("test");
};
$(document).ready(function () {
alert("test2");
});
document.addEventListener("deviceready", "OnDeviceReady", false);
function OnDeviceReady()
{
alert("test3");
document.getElementById("test").innerHTML = "hello world";
}
I built the app using Phonegap build and tested it on android phone. The alerts in the first two functions are working fine, but the callback function for deviceready is not working. I'm am not sure if cordova.js is loaded correctly.
I downloaded phonegap and copied the config.xml and cordova.js from the following folder locations
\phonegap-2.9.1\phonegap-2.9.1\lib\android\cordova.js
\phonegap-2.9.1\phonegap-2.9.1\lib\android\example\res\xml\config.xml
I haven't made any changes to the config.xml yet. Could anyone please help me with my issue ? I am not sure what I'm doing wrong. Any help would be much appreciated. Thanks
You are passing a string as event handler and not the function. Try:
document.addEventListener("deviceready", OnDeviceReady, false);
I'm new to phonegap so I just tried something out and was starting with the onDeviceReady method. The problem I'm encountering is, that the method doesn't fire.
This is my complete code, pretty basic.
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$("#texttest").css("display", "none");
}
</script>
</head>
<body>
<div id="texttest" style="display:block">text</div>
</body>
</html>
So now, when the app is launched the text should be hidden right? Well, the entire div should, but the device still shows me the "text". What am I doing wrong there? I also tried some other basic methods like
$("#texttest").hide()
but that didn't work either. This is the MainActivity.java
package de.activevaluetenthousandfliesphonegap;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import org.apache.cordova.*;
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Ensure you have the correct version of cordova.js for the platform you are targetting.
Also what version of Phonegap are you using ?
Please try removing the font-awesome, if included. They have some compatibily issues with its css file.
<link rel="stylesheet" href="css/font-awesome.min.css" />
I had the same problem once and solved when I removed the above line from my code,
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
$("#texttest").css("display", "none");
}
</script>
</head>
<body onload="onLoad()">
<div id="texttest" style="display:block">text</div>
</body>
</html>
Here is what I think you need to do:
$(document).ready(function(){
document.addEventListener("deviceready", onDeviceReady, false);
}
Because when your device ready triggers jQuery hasn't loaded - this will ensure you do the following:
1. Get jQuery
2. Trigger PhoneGap deviceready
Also remove your onLoad() function ! :)
First of all You need to test it as an application in the emulator/mobile and not on the web browser. Secondly if you want to use geolocation then you can use it like this
function onDeviceReady() {
console.log("we are an app");
MyApp.initialize_phonegap();
}
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
</script>
</head>
<body onload="onBodyLoad()">
It is working on my ripple emulator. But I use jquery-1.9.1.js and cordova 2.7 ?
I was using the cordova.js shared by my colleague who is an iOS developer. I replaced that with the latest cordova.js from the Cordova site and it started to work pretty well.
After creating your app using cordova, the index.js (or build.js) contains something like
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
in the default event handler function "receivedEvent".
These lines only work fine for the Hello-World-Dummy of Cordova. As soon as you replace the content of the index.html "parentElement" will be undefined. That leads to a javascript error
Uncaught TypeError: Cannot read property 'querySelector' of null
at Object.receivedEvent (index.js:37)
at Object.onDeviceReady (index.js:31)
at Channel.fire (cordova.js:846)
at cordova.js:231
The index.html of the cordova Hello-World contains a container
<div id="deviceready" class="blink">
As soon as you remove this, the build of the app failes with the mentioned JavaScript-Error.
You can simply replace the lines above with something like
if (id=="deviceready")
{
console.log("addEventListener for backbutton");
$("#texttest").css("display", "none");
// ... whatever
}
My concept is to update the value of the text box in the main page from the iframe . This code is working in firefox , but not working in Internet Explorer and Chrome . Both main.html and frame.html are in same location . I need suggestions to make it work in all the browsers .
main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
</head>
<body>
Parent textbox :<input type="text" id="parentbox"></br></br></br>
<iframe src="frame.html" ></iframe>
</body>
</html>
frame.html
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function PushValues()
{
var frame_value = document.getElementById("framebox").value;
window.parent.document.getElementById("parentbox").value =frame_value;
}
</script>
</head>
<body>
<input type="text" id="framebox" >
<input type="button" value ="fill" onclick="PushValues()">
</body>
</html>
As per security policies, cross-domain access is restricted. This will happen if you are trying to show a page from domain 1 in domain 2 and try to manipulate the DOM of page in domain 2 from the script in domain 1. If you are running the pages from same location on a server. This shouldn't happen. However, if you are just saving them as HTML files and trying to open them in your browser, it should not work. I have created two jsbins for your code and it is working on chrome. Try to access them using the below links.
Main.html: http://jsbin.com/afazEDE/1
iframe.html: http://jsbin.com/ayacEXa/1/
Try to run main.html in edit mode in JSBin by keeping console open in chrome (F12) and click fill button. It will not work and will show you the error. If you run them as it is (in run mode of JSBin), it will work.
Jquery -
function PushValues()
{
var frame_value = $('#framebox').val();
parent.$('body').find('#parentbox').val(frame_value);
}
It's always work for me.
Run this code on a server like xamp or wamp it wont work directly
Main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
Parent textbox :<input type="text" id="parentbox" value=""></br></br></br>
<iframe src="iframe.html"></iframe>
<script>
window._fn = {
printval: function (response) {
$("input").val(response);
},
};
</script>
</body>
iframe
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" id="framebox">
<input type="button" value="fill" onclick="PushValues()">
<script language="javascript">
function PushValues() {
window.parent._fn['printval']($('input').val());
}
</script>
</body>
</html>
Since you're using jQuery try this
var frame_value = $('#framebox').val();
$('#parentbox', window.parent.document).val(frame_value);
You should try P3P policy which is highly related to iframes and Internet Explorer.
response header set to the iframe document
header key= 'P3P' header value: 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'
I just created a new widget by following a tutorial. I created a zip containing all files and renamed it to HelloWorld.wgt instead of HelloWorld.zip. I sent it to my samsung star/corby via data cable, but when I try to open the wgt file on my phone it says it can't open it, because it doesn't know the filetype. Is there a way to install widgets on a Samsung Star without using a webserver?
Thanks,
Rohit desai
Just create an HTML file like this:
<html>
<head>
<title>Hello</title>
</head>
<body>
Install widget
</body>
</html>
Put the HTML file in the same folder with your widget and open the file. Click on Install widget and you are done.
P.S.: If you don't want to modify the HTML file for every widget you want to install use this code:
<html>
<head>
<title>Hello</title>
<script>
function download()
{
var widgetName = document.getElementById("widgetName");
location.href = widgetName.value + ".wgt";
}
</script>
</head>
<body>
<input type="text" name="widgetName" id="widgetName" />
<input type="button" value="Install widget" onclick = "download()" />
</body>
</html>