IN my Phonegap ios project i have an i frame and src of Iframe is a local html page within the same www folder . inside the html (IFrame source) one button and onlick listener. i need to open one website while clicking that button in InAppBrowser or in safari (new window). i cannot able to access phonegap methods from the html file (IFrame source), i includeed cordova on both html files, my source html page given bellow, this page is shown in an Iframe.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/libs/jquery.js"></script>
<script src="adv.js"></script>
<script>
$(document).ready(function () {
$('#advArea').find('button').on('click', function (e) {
e.preventDefault();
var path = "http://www.google.com");
console.log(path);
//window.open(path,'__system');
//need to acces inApp Browser from here
})
});
</script>
</head>
<body>
<div id="advArea">
<button></button>
</div>
</body>
</html>
In your "parent" page where your iFrame is, create the below function
function popnew(path) {
navigator.app.loadUrl(link, { 'openExternal' : true });
}
then you call the above function for any button/link in the iFrame
<button onclick="javascript:parent.popnew('http://www.stackoverflow.com')"></button>
Related
I am using electron version 5.5.1 on Windows10.
I opened the web page in webview and added the ‘contextmenu event' to the web element. And then I added the contextmenu event to the webview.
It works in the webview, but when I right-click to open the context menu, the webview event is also triggered. How can I avoid that the webview event is also triggered?
this is web Example
<html>
<head>
</head>
<body>
<div oncontextmenu="jjc()" style="width:100px;height:100px;border: 1px solid red;"></div>
</body>
<script>
function jjc(){
event.preventDefault();
alert("1");
}
</script>
</html>
this is webview style
<webview ref="webview" style="height:93%; width:100%" v-on:contextmenu ="handlex.onContextMenu($event,selectPage,index,false)" plugins />
I am very very new in Cordova (a few weeks), and building an iOS app, and I am trying to implement a code which opens an external url in the default browser, Safari. I am following a tutorial which says to "use the following as part of the startup code in your Cordova app":
window.addEventListener('load', function () {
$(document).on('click', 'a[target="_system"],a[target="_blank"]', function (e) {
e.preventDefault();
var url = this.href;
window.open(url,"_system");
});
//}
}, false);
How do I add this as a part of the startup code? Would it be a script tag at the top of the page? I tried that and got no luck.
Here is the link to the tutorial I am using: http://weblog.west-wind.com/posts/2015/Jul/02/External-Links-in-Cordova-for-iOS
The code you showed should be included with script tag as you tried. After that you need to add link element in your HTML and click that. So your index.html would look something like this
<html>
<head>
<script src="cordova.js"></script>
<script type="text/javascript">
window.addEventListener('load', function () {
$(document).on('click', 'a[target="_system"],a[target="_blank"]', function (e) {
e.preventDefault();
var url = this.href;
window.open(url,"_system");
});
}, false);
</script>
</head>
<body>
Go to Google.com
</body>
</html>
What the script actually does is that it registers itself as event handler for click event so basically it is called every time some link with target="_system" or target="_blank" is clicked. When it is called, it first prevents any other event handlers for it from being executed (e.preventDefault();). After that it reads the URL for the link clicked and opens that with the external browser (window.open(url, "_system");).
I am trying to build a small mobile app with JQuery Mobile and EmberJS.
This is actually a Rhodes Application (Rhomobile).
This is my Layout.erb:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Todo</title>
<!-- Ember Libraries -->
<script src="/public/js/libs/handlebars-1.0.0.js"></script>
<script src="/public/js/libs/ember.js"></script>
<script src="/public/js/libs/ember-data.js"></script>
<!-- Ember Application -->
<script src="/public/js/application.js"></script>
<script src="/public/js/router.js"></script>
<script src="/public/js/models/todo.js"></script>
<script src="/public/js/controllers/todos_controller.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
$.mobile.loadingMessageDelay = 300; // in ms
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.loadingMessageDelay = 50; // in ms
});
</script>
<link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="/public/css/jqmobile-patch.css">
<script src="/public/jqmobile/jquery.mobile-1.3.1.min.js"></script>
<script src="/public/js/jqmobile-patch.js"></script>
</head>
<body data-platform="<%= Rho::System.getProperty('platform') %>">
<%= #content %>
</body>
</html>
As you can see I have disabled Ajax and PushState and stuff. This is my index.erb:
<script type="text/x-handlebars" data-template-name="todos">
<div data-role="page">
//My Template
</div>
</script>
Now when I try it, I just get a blank grey page. But no error in console or in Ember-Console (extension of Chrome). It even detects my views and controllers properly.
Then I try commenting the JqueryMobile CSS files and what I get is a page's height worth of blank space with "Loading" message and then I see my application below and it works fine. And if I remove JqueryMobile JS, I get the stuff but its not styled.
What is the problem?
It's kind of hard to say without seeing some more code of your app. If you only have the one template defined ('todos') it may be the case that Ember doesn't know how to kickstart the rendering of your app. You may need to define an 'application' template. It might be as simple as:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
I have an listview which fect the data from the local database. And I want to add and taphold event on the list items so i uses taphold example from this site http://www.raymondcamden.com/index.cfm/2012/5/23/Context-Menu-Example-with-jQuery-Mobile but when run this code on emulator its working fine but when i tried to implement it into code which i'm usign its not working properly it giving an alert thats its in Taphold event but doesn't create a sampledialog box here the code which I am using:
function createlist(){
alert("I am in create list");
db.transaction(function(tx){
tx.executeSql(select_nameUserDetails,[],function(tx,results){
$('#name').empty();
alert("from list "+results.rows.length);
if(results.rows.length>0)
{
for(var i=0;i<results.rows.length;i++)
{
alert(i);
$('#name').append('<li><p class="namelist" id="s'+i+'" onclick="selectname('+results.rows.item(i).id+')">'+results.rows.item(i).frist_name+'</p></li');
temp_id=results.rows.item(i).id;
dataobj[temp_id]=results.rows.item(i).frist_name;
alert(dataobj[temp_id]);
}
else{
alert("No data present");
}
});
$(document).on("taphold",".namelist",function(event){
alert("I am in taphold event");
event.stopPropagation();
$(this).simpledialog2({
mode:"blank",
headerText:"Image Options",
showModal:false,
forceInput:true,
headerClose:true,
blankContent:"<ul data-role='listview'><li><a href=''>Edit</a></li><li><a href=''>Delete</a></li></ul>"
});
});
});
}
here is the js and css files in using:
<link rel="stylesheet" href="contactcss/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/jquery.mobile.simpledialog.min.css">
<script src="js/jquery.js"></script><script src="js/index.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/jquery.mobile.simpledialog2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.7.0.js"></script>
here is the html code:
<div data-role="Content" >
<div data-role="listview" id="field">
<ul class="Name" id="name" data-role="listview" data-inset="true" data-theme="b">
</ul>
</div>
logcat Error i am getting:
07-13 17:29:33.145: D/CordovaLog(2696): TypeError: Result of expression 'o[0]' [undefined] is not an object.
07-13 17:29:33.145: E/Web Console(2696): TypeError: Result of expression 'o[0]' [undefined] is not an object. at file:///android_asset/www/js/jquery.mobile-1.3.1.min.js:4
Thanks in advance
When working with dynamically created content and jQuery Mobile you must use delegated event binding.
Instead of this:
$(".namelist").on("taphold",function(event){
bind it like this:
$(document).on("taphold",".namelist",function(event){
This solution don't care if .namelist exist or not. Tap event will be bound to document object and it will propagate to .namelist only when it become active in the DOM.
I embedded phoneGap in my UIWebView, referenced to this doc:
http://docs.phonegap.com/en/2.2.0/guide_cordova-webview_ios.md.html#Embedding%20Cordova%20WebView%20on%20iOS
And in the index.html, I write this sample code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert(“jquery loaded”);
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
after the webview loaded, the "body" can be shown, but the alert can't be pop out. So the jquery.js is not loaded? Or something else is wrong?
Edit:
I added "http:" to the src, but not work.
Thanks!
change
alert(“jquery loaded”);
to
alert("jquery loaded");
or
alert('jquery loaded');
Add http or https to your code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The above should work for you.
Did you add the Cordova file?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./cordova-2.3.0.js"></script>
<script>
$(document).ready(function() {
alert(“jquery loaded”);
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Also as much as phonegap uses HTML 5 it still requires a bit different style of writing your code. Everypage you make should all be in the same index page because Cordova loads at startup in your project. If you navigate away from the page Cordova needs to reload.
Did you copy jquery file at www forder (www/jquery.js). I use jquery too, mine is www/js/jquery.js
Try this!!!