I've a problem with the JavaFX Webview and Javascript. Within the Webview I try to load some html content dynamicaly into a div when the User clicks a button with an a href. Every time I do this within the Webview, it loads the refering page directly, without loading it into the div.
In Firefox, Chrome and with Apache Server it's working properly, so it's loaded into the div container.
Here's the code to load the various content:
$(document).ready(function()
{
$(".panel-body a").click(function stopDefault(event)
{ if (event && event.preventDefault) {
event.preventDefault();
var pageToLoad = $(this).attr("href");
$("#content").load(pageToLoad);
} else if (window.event && window.event.returnValue)
{ window.event.returnValue = false;
}
});
});
The script is with the if else already prepared for standard conform browsers and IE.
I also tried it (in the beginning) with return false; but this was also not working. So, the default action is not prevented / disabled. And I don't have any more idea why this is just not working in JavaFX Webview.
Thanks in advice!
Related
Update
User Quentin helped me solve it. The lightbox had a event.stopPropagation(); in the function which prevented the eventlistener from bubbling up. After removing it the links worked properly.
I used this comment with honyovk's addition to replace the stopPropagation with a more elegant function: https://stackoverflow.com/a/1089622/3461722
Question
I have a webapp for iOS in which I use an EventListener to prevent links from opening in Safari. This works flawless for 99% of the links, but a few specific links still open in Safari for some reason unknown to me.
This is my Javascript:
// Mobile Safari in standalone mode
if(("standalone" in window.navigator) && window.navigator.standalone){
// If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
var noddy, remotes = false;
document.addEventListener('click', function(event) {
noddy = event.target;
// Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
noddy = noddy.parentNode;
}
if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
{
event.preventDefault();
document.location.href = noddy.href;
}
},false);
}
The links that fail to open in the webapp are nothing special, and other links on the page work without problem. An example of a not properly working link:
Buy
This link is opened in a lightbox, but on other pages I have similar links also in a lightbox and they work fine. I have several popups with roughly the same link, only the "green" is different and some have an extra "&time=1", they all fail to open in the webapp.
Is there someone who can find fault with this code?
I created a jquery mobile web app and on one of the buttons it links to an .HTML file. When I add the web app to my home screen and tap that button it opens the .HTML page in safari instead of staying within the app. I did some research online and came across this file but I still can't get it to work. Any ideas how to address this?
https://github.com/mrmoses/jQuery.stayInWebApp
Here's what I use...applies to all anchors. To make a long story short, it's disabling each anchors default behaviour, grabbing the clicked anchor's href, and then using js to open the link within the web-app. Applied to mobile devices only.
<script>
$(function() {
// prevent anchor links from opening in safari, web-app fix
if (("standalone" in window.navigator) && window.navigator.standalone) {
// For iOS Apps
$('a').on('touchend click', function (e) {
e.preventDefault(); return false;
var new_location = $(this).attr('href');
if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined) {
window.location = new_location;
}
});
}
});
</script>
I have implemented a script to prevent the link in my mobile app on my ipad.
It works fine but I have problem now with the popup I have with jquery mobile.
The problem is when I use this script, the popup window doesn´t open anymore.
What can I do to open the popup window?
The script:
(function(document,navigator,standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if('href' in curnode && ( curnode.href.indexOf('http') ||
~curnode.href.indexOf(location.host) ) ) {
e.preventDefault();
location.href = curnode.href;
}
},false);
}
})(document,window.navigator,'standalone');
In this case, you need to open it programmatically.
$('#popupID').popup('open');
Solved it...
what i have done:
instad to use the script i have write above, i only use this code in the .
<a onclick="parent.location='root/example.html'" id="ex"></a>
this allows me when i see my app in the fullscreen mode.. to navigate between the pages without to open it in the browser, the page loaded in my app.
I'm working on a Chrome extension which injects a link into the page which upon click triggers a click on two links visible within the page. It works when I run the code from the console, but due to Chromes Isolated World handling of extensions, the click event fails to fire on the origin page links. Is there a way around this?
Code:
function foo(e) {
e.preventDefault();
$(this).parent().siblings('.myElement').children('a.first-link').click();
$(this).parent().siblings('.myElement').children('a.second-link').click();
}
$(document).on('mouseover', 'div.content', function() {
if($(this).find('ul').children('li').length === 0) {
var li = $('<li class="foo"></li>');
var a = $('Action');
a.on('click', foo);
li.append(a);
$(this).find('ul').children('.myElement').after(li);
}
});
Thanks for your help!
I've been working on a Frame busting buster (what's in a name, hehe), which kept my users on my page and open a new window with the target URL. I'm using a Lightbox script to display iframes, this is what I'm doing:
1) Added an event for all .lightbox clicks, f.e:
$('.lightbox').live("click", function(e) {
e.preventDefault();
$('#redirectURL').val($(this).attr('href'));
$(this).lightbox();
}
2) Added a frame busting buster:
<script type="text/javascript">
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://server-which-responds-with-204.com'
}
}, 1)
</script>
3) Modified the frame busting buster code to fit my needs, which are:
detect if an iframe wants to change the window.top.location
if so, prevent this from happening using the 204 server respond
open a new page: window.open( $('#redirectURL', '_blank' );
close lightbox: $('.jquery-lightbox-button-close').click();
So far, this is what I've come up with:
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2;
redirectURL = $('#redirectURL').val();
if(redirectURL != "") {
window.top.location = 'http://www.****.com/ajax/nocontent.php';
window.open(redirectURL, "_blank");
$('.jquery-lightbox-button-close').click();
$('#redirectURL').val('');
} else {
window.top.location = 'http://www.****.com/ajax/nocontent.php';
}
}
}, 1);
// EDIT: Before I forget, 'nocontent.php' is a file that returns a 204 header
For Firefox it acts as I programmed it, if there's a change detected in the window.top.location it opens a new frame/page and prevents the iframe from reloading the top location and to round it up, it closes the jQuery lightbox.
Safari/Chrome act similar, they open a new browser screen (not sure if theres an option to say target="_newtab" or something?). Only bad thing is they do not really display a message of the popup is blocked, but I can work around that by displaying a popup balloon on my website with a link to the page.
Internet Explorer is, what a shocker, the only black sheep left.. IE does not open a new popup, nor blocks the window.top.location reset by the iFrame and simply continues refreshing the complete page to the '#targetURL'. It does the same with the default busting code.. so it's not because of some of my edits.
Anyone who is able to spot a mistake in my code?
Also, I would need a little modification that sees if the request has been made by an iframe or by the user itself, because now there is really NO option for a user to leave my page by changing the address in the toolbar or by clicking a link, which is not really needed LOL.
Thanks in advance.
PENDO, I tried to simulate the whole process you described, ligthbox-jquery, javascript their own codes and controls opening pages via lightbox. I could not simulate at all, and as time is running out I'm sending a suggestion to broaden the range of possibilities and solutions.
I suggest replacing the redirect page:
...
redirectUrl = $ ('# redirectUrl'). val ();
...
window.top.location = 'http://www .****. with / ajax / nocontent.php';
window.open (redirectUrl, "_blank");
Replaced with a DIV container that simulates a page, using ajax calls and taking the content and overwritten the contents of the DIV.
...
$.post(redirectoURL /* or desired URL */, function(data) {
$('DIV.simulateContent').html(data);
});
...
or
...
$('DIV.simulateContent').load(redirectoURL);
...
This approach also avoids the problem of preventing the user from even leaving your page using the address bar (as you yourself mentioned).
Sorry, let me give you a complete solution, but time prevented me.
PENDO, a little more work on alternatives to the problem, I found a customizable jQuery lightbox plugin for working with custom windows yet (iframe, html, inline ajax etc.). Maybe it will help. The following link:
http://jacklmoore.com/colorbox/
If you don't need javascript running in your iframe in IE, you can set the iframe security attribute :
<iframe security="restricted" src="http://domain.com" />
http://msdn.microsoft.com/en-us/library/ms534622(v=VS.85).aspx