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 />
Related
I have a legacy cn1 app (using the old GUI builder) with a web browser component in the center of the Form (centered in a BorderLayout Container which is the main Form component). In the simulator as well as on an Android device the WebBrowser renders fine. In the iOS simulator the entire component shows up as a black rectangle, and on an iPhone (5s running iOS 9.1), the content of the WebBrowser is visible but doesn't scroll.
Is there some particular setting that needs to be changed for it be scrollable?
This is my code:
WebBrowser web = new WebBrowser() {
#Override
public void onLoad(String url) {
System.out.println("Article body webview loaded");
Component c = getInternal();
if (c instanceof BrowserComponent) {
BrowserComponent b = (BrowserComponent) c;
String text = ((String) m.currentArticleInfo.get("id"));
b.execute("loadArticle('" + text + "')");
}
}
};
((BrowserComponent) web.getInternal()).setNativeScrollingEnabled(true);
((BrowserComponent) web.getInternal()).setScrollVisible(false);
web.setScrollVisible(false);
web.setURL("jar:///article_body.html");
web.setScrollable(true);
web.getAllStyles().setPaddingTop(10);
form.addComponent(BorderLayout.CENTER, web);
I don't see any errors in the console. The web page code looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://www.example.com/styles/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body::-webkit-scrollbar{
width: 0 !important;
}
#left_side_article #right #the_article #details_info{
font-size: 3.5mm !important;
}
div#the_article{
border: none !important;
}
div#the_article_header{
padding: 0 !important;
}
</style>
</head>
<body style="min-height: 100px">
<div id="left_side_article">
<div id="right">
<div id="the_article">
<div id="details_info" >
</div>
</div>
</div>
</div>
<script>
function loadArticle(content) {
console.log('in load article function, article id: ' + content);
var url = "https://www.example.com/api/article_body_ajax.php";
$.post(url,{"app_code": "myappcode", "id" : content},function(data,status,jqxhr){
$("#details_info").html(data);
$("#details_info img").each(function(){
$(this).attr("src", "https://www.example.com/" + $(this).attr("src"));
$(this).css("height", "auto");
});
});
};
</script>
</body>
</html>
Update
I tried debugging the WebView by downloading the app sources and using Safari to inspect the page. Safari recognized that there was a web page open in the app, and I was able to choose it from the Develop menu in Safari, but the inspect window was completely empty - no elements whatsoever.
I just committed a fix for the scrolling issue in iOS here. There was a bug that caused scrolling to be disabled if you call setNativeScrollingEnabled(true). This fix will be available in the next library update (next Friday). In the mean time, you can work around this by just not calling setNativeScrollingEnabled(true) - as the default is true anyways.
That might be related to changes we made to getComponentAt see if this is still happening after the update this weekend. We discussed some of the regressions related to this here: https://www.codenameone.com/blog/dont-touch-that-code.html
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>
I have an issue with vclick (or click) events when fired.
This is my html code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/estilo.css">
<script src="js/cordova-2.6.0.js"></script>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/functions.js"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" position="fixed">
<h1>Data</h1>
</div>
<div data-role="content">
<div id="btn_comentar">
</div>
</div>
</div>
</body>
</html>
And this is my functions.js
$(document ).bind("mobileinit", function(){
$(document).bind("pageinit",function(){
$("#btn_comentar").bind("vclick",function(e){
console.log(e.isDefaultPrevented());
console.log(e.result);
console.log(e.relatedTarget);
alert("buttooon");
list_comments();
});
});
}
When I click my #btn_comentar, the data that I want to retrieve from function list_comments (sending via ajax) is duplicated; I realized that it was sending twice, and finally that it was something about when I clicked on my button.
This is the output from the console (twice):
false
undefined
null
and also the alert message box (twice) "buttoon";
I have tried some solutions like:
jQuery Mobile : replace click event by vclick event
but without success, please need some help
This is my new code and how it is now working, but it seems that without jQuery Mobile's default configuration
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/estilo.css">
<script src="js/cordova-2.6.0.js"></script>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/custom-mobile.js"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/functions.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" position="fixed">
<h1>Data</h1>
</div>
<div data-role="content">
<div id="btn_comentar">
</div>
</div>
</div>
</body>
</html>
custom-mobile.js
$(document ).bind("mobileinit", function(){
//$.mobile.allowCrossDomainPages = true;
});
functions.js
$(document).on("ready",function(){
$("#btn_comentar").bind("vclick",function(){
list_comments();
});
});
According to docs,
These enhancements are applied based on jQuery Mobile's default configuration, which is designed to work with common scenarios, but may or may not match your particular needs. Fortunately, these settings are easy to configure using the mobileinit event.
So that's what you need to use mobileinit for. For setting defaults like this :
$(document).bind('mobileinit', function(){
$.mobile.defaultTransition = 'slideup';
});
If my understanding is right, mobileinit is included/fired before jQuery Mobile's js is included. Assuming you done that, your script order must look like this :
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- This script must have mobileinit -->
<script src="jquery-mobile.js"></script>
At this point of time (when custom-scripting.js is loaded), pageinit wouldnt be defined.
It would be wise to add your pageinit event AFTER jQM script.
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- This script must have mobileinit -->
<script src="jquery-mobile.js"></script>
<script>
$(document).bind("pageinit", function(){
$(document).bind("vclick", "#btn_comentar" ,function(e){
console.log(e.isDefaultPrevented());
console.log(e.result);
console.log(e.relatedTarget);
alert("buttooon");
list_comments();
});
});
</script>
use once on pageinit:
$(document).on('pageinit') {
$("#btn_comentar").on("vclick",function(e){
console.log(e.isDefaultPrevented());
console.log(e.result);
console.log(e.relatedTarget);
alert("buttooon");
list_comments();
});
}
this should work
Another cause of double-vclicks I've encountered is due to Chromium synthesizing both touch events in addition to mouse events. I confirmed this cause by running the app in desktop Chrome's developer "device mode" (where the mouse cursor changes into a circle), confirming the problem exists, then toggling off device mode, and confirming the problem is "fixed".
jblas discusses it, partial excerpt:
Note that vclick does NOT suppress the synthesized mouse/click events that are generated by the browser because it does not know what context it is being used in, AND form input elements require the mouse/click events to function normally.
If you use a joystick or mouse (desktop), the alert will fire on the normal mouse click event.
If you want to suppress the click event while using touch, you have to call event.preventDefault() in your vclick handler. This will queue the request to kill the click event that follows but due to the differences in the way device vendors implement their events, and some bugs within different android OS versions, this turns out to be very hard to do. We try a couple of methods to figure out whether or not to kill a click event ... one is based on the element the touch event was triggered, on, and another is the position of the touch event. This is necessary because The browser does not necessarily dispatch the mouse events to the same element that it used for the touch event.
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!!!
I have implemented a basic example with phonegap for android in eclipse. Than i went with ios environment. I have downloaded the cordova plugin and created a new project. Then i replaced www folder with the www folder that i have created for android. The index html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=content-type content=text/html charset="utf-8">
<title>navigator.network.connection.type Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
// document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function helloworld() {
console.log('phone gap log...');
alert('Hello World');
}
</script>
<script src="http://debug.phonegap.com/target/target-script-min.js#anonymous"></script>
</head>
<body background="login.png">
<img alt="" src="login_logo.png" STYLE="position:absolute;LEFT:25px">
<form STYLE="position:absolute;TOP:175px; LEFT:65px; WIDTH:100px; HEIGHT:50px" >
Kullanıcı Adı:<br> <input type="text" id="uname" ><br>
Şifre:<br> <input type="text" id="pword"><br>
</form>
<button type="submit" onclick="helloworld()" STYLE="position:absolute;TOP:295px; LEFT:110px; WIDTH:100px; HEIGHT:50px" >GİRİŞ</button>
</body>
</html>
the style of the screen is same as with android. But when i pressed the submit button, i have got no action or no log in xcode or ios simulator. But it works on android and on eclipse. Why my simple code does not work on ios environment?
The onclick event isn't reliable in the Web View. You need to use ontouchstart or another event listener instead. The Apple Documentation lists the supported touch events.
So in your case you would have to change the button to something like this:
<button type="submit" ontouchstart="helloworld()" STYLE="position:absolute;TOP:295px; LEFT:110px; WIDTH:100px; HEIGHT:50px" >GİRİŞ</button>