I want to catch and consume (prevent redirection) link events on the teamdev's jxbrowser. Suppose the content is
link
When the user clicks the link, I want to be informed that the user has clicked the link and get the URL, but I do not allow the page change (link should be consumed).
The problem is, the links in the quotes of the anchor tag do not start with any protocol (http:// or https:// and do not end with any .html or etc). For example the link is in the form of:
<a href="foo">link<a>
and we want when user clicks on the link, we get informed that the clicked string is foo. I know, the links in this a tag are not valid and not well formed due to the standarts, but the contents are generated by using some specific busines rules and then set to the JxBrowser. And we can not change the way the links are created.
With the example below, we get about:blank for the url, which is not the desired info. If we change to
link
then it works fine but we can not modify the links (content) as I have mentioned before.
browser.addLoadListener(new LoadListener () {
public void onStartLoadingFrame(StartLoadingEvent arg0) {
System.out.println("link click occured " + arg0.getValidatedURL());
arg0.getBrowser().stop();
}
);
LoadHandler allows you to handle any activity related to loading. Using LoadHandler you can determine the load type and cancel any load events. Here is an example:
browser.setLoadHandler(new DefaultLoadHandler() {
#Override
public boolean onLoad(LoadParams params) {
if (params.getType() == LoadType.LinkClicked) {
System.out.println("Link clicked: " + params.getURL());
return true;
}
return false;
}
});
Related
Hey guys I'm trying to get the html element that was touched by user in the webview. The scenario is for instance user touches some kind of button in the webview and the application displays the html code for the button like:
I'm already able to get the html code that the user is browsing but problem is with getting the specific html elements.
The websites the user will be browsing through will be a random sites on the internet so I can't simply put an onclick function on the button and notify the android about the click.
Any idea how would I be able to implement that?
try this:
webview.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View view, MotionEvent event) {
WebView.HitTestResult hr = ((WebView)view).getHitTestResult();
Log.i("TAG", "getExtra = "+ hr.getExtra() + "Type= " + hr.getType());
//return true;
return false;
}
});
getExtra() returns the element which is clicked by user and getType() is used to identify which HTML element is clicked by user.
I'm looking for a way to change the hash url automatically. (no page reload)
The reason I want it is this:
I'm using a pop login / registration form that only initially opens the login portion. You can only get to the registration portion after clicking the login. So, when the user clicks the http://website.com/#modal-login from a certain link, I'd want it to redirect to http://website.com/#register.
Currently it is directly going to the #register. Is there a way to change the hash url after user clicks on login?
No need to use jQuery
document.getElementById("modal-login").onClick = function () {
window.location.hash = "register";
}
For example, try pasting this into your browser's JavaScrtipt console, then click on your question text.
document.getElementById("question").onclick = function() {
window.location.hash = "footer";
}
If you really want to use jQuery for some reason
$('#modal-login').click(function(event) {
event.preventDefault();
window.location.hash = "register";
});
Edit:
Your question isn't about hash locations in general, but how this modal plugin that you're using works. The following was determined by reading the source to the plugin, found here:
http://demo.pressapps.co/plugins/wp-content/plugins/pressapps-modal-login/js/modal-login.js?ver=1.0.0
http://demo.pressapps.co/plugins/wp-content/plugins/pressapps-modal-login/js/modal.js?ver=1.0.0
Here's what you need to execute to get your desired behavior
$('.your-register-button-class').click(function(e) {
/* We expect plugin's click handler to fire in addition to this one. */
$(".modal-login-nav[href='#register']").click();
});
I'm assuming that the element with .your-register-button-class also has attribute data-toggle="ml-modal".
As the title says ....
Sorry that some ppl got question wrong...
I want to show confirmation on these cases only:
1.Browser window is closed.
2.There is a redirect to different domain
thanks
By using the onbeforeunload event:
window.onbeforeunload = function() {
return 'Are you sure you want to navigate away from this page' ;
};
The first question has already been very well covered.
Alerts when navigating away from a web page
The second part is more troublesome. You won't get anything in the onbeforeunload event that tells you which link was clicked on to trigger it.
If you wanted to detect which link caused the close you'd have to attach some script to each link's onclick event. You'd also have to remove the href from the link and store it somewhere, you could do it like this using jQuery:
<script>
$(window).load(
function () {
$("a").each(function () {
$(this).data("url", $(this).attr("href")).attr("href", "#").click(
function () {
var destination = $(this).data("url");
// do something to check the domain, I'm just checking the whole url
if (destination == "http://norman.cx/photos/") {
alert("Not navigating to: " + destination);
} else {
alert("Navigating to: " + destination);
window.location.href = destination;
}
return false;
}
);
});
}
)
</script>
test
msft
This gets the href for each link, stores it against the link using data() and sets the link's href to "#". It then attaches a click event to each link that retrieves the url from data() and does something with it.
You could do it the other way, conditionally change the href and add the click event only on links that where on another domain.
Whether that would be a good idea or not is another question. It is at the very least an unusual thing to find yourself doing.
<body onunload="doYourThing();" >
Here's what I"m trying to do. I have a hyperlink like this on my page:
Whatever Page Here
When a user clicks the link I want to grab that click. If it's a link I don't want them to click (like something that doesn't match the format http://www.wikipedia.com/wiki/xxxxx) I want to pop a message box. Otherwise I want to funnel them through my Mvc Controller instead. like this:
//Category is the "Whatever_Page_Here" portion of the Url that was clicked.
public ActionResult ContinuePuzzle(string category)
{
}
Any suggestions?
Start by intercepting all the click events:
$(function() {
$("a").click(ClickInterceptor);
});
function ClickInterceptor(e)
{
// code to display popup or direct to a different page
if (redirect)
{
var href = $(this).attr("href").split("/");
location.href = "http://mydomain.com/controller/" + href[href.length - 1];
}
return false;
}
The "return false;" tells the anchor not to fire the navigate.
If you want to select all the a tags which do not start with "http://http://www.wikipedia.com/wiki/" you would use:
$("a").not("a[href^='http://http://www.wikipedia.com/wiki/']")
Is there a way to make the user's back button on their browser, call a javascript function instead of going back a page?
You can't override the behaviour that if a user follows a link to your page, clicking Back will take them off it again.
But you can make JavaScript actions on your page add entries into the history as though they were clicks to new pages, and control what happens with Back and Forward in the context of those clicks.
There are JavaScript libraries to help with this, with Really Simple History being a popular example.
yes, you can. Use this js:
(function(window, location) {
history.replaceState(null, document.title, location.pathname+"#!/stealingyourhistory");
history.pushState(null, document.title, location.pathname);
window.addEventListener("popstate", function() {
if(location.hash === "#!/stealingyourhistory") {
history.replaceState(null, document.title, location.pathname);
setTimeout(function(){
location.replace("http://www.programadoresweb.net/");
},0);
}
}, false);
}(window, location));
That will redirect your back button to the location.replace you specify
I think this will do the trick.
you can write your custom code to execute on browser back button click inside onpopstate function.
This works in HTML5.
window.onpopstate = function() {
alert("clicked back button");
}; history.pushState({}, '');
I assume you wish to create a one-page application that doesn't reload the website as the user navigates, and hence you want to negate the back button's native functionality and replace it with your own. This can also be useful in mobile web-apps where using the back button inside apps is common to close an in-app window for example. To achieve this without a library, you need to:
1st. Throughout your application modify the window's location.hash instead of the location.href (which is what tags will do by default). For example, your buttons could fire on click events that modify the location.hash like this:
button.addEventListener('click', function (event) {
// Prevent default behavior on <a> tags
event.preventDefault()
// Update how the application looks like
someFunction()
// Update the page's address without causing a reload
window.location.hash = '#page2'
})
Do this with every button or tag you have that would otherwise redirect to a different page and cause a reload.
2nd. Load this code so that you can run a function every time the page history changes (both back and forward). Instead of the switch that I used in this example, you can use an if and check for other states, even states and variables not related to location.hash. You can also replace any conditional altogether and just run a function every time the history changes.
window.onpopstate = function() {
switch(location.hash) {
case '#home':
backFromHome()
break
case '#login':
backFromLogin()
break
default:
defaultBackAnimation()
}
}
This will work until the user reaches the first page they opened from your website, then it will go back to new tab, or whatever website they were in before. This can't be prevented and the teams that develop browsers are patching hacks that allow this, if a user wants to exit your website by going back, they expect the browser to do that.
If you are creating a one-page web application, where your html body has different sections and you want to nevigate through back button to the previous section you were. This answer will help you.
Where your website sections are differentiated by #. Such as:
your-web-address.com/#section-name
Just follow a few steps:
Add a class and a id in every section in you html body. Here it is ".section"
<section class="section" id="section-name">...</section>
Add two CSS class in your linked css (e.g., style.css) file to your html (e.g., index.html) file such:
.section .hide {
display: none;
}
.section .active{
dislplay: block;
}
Add this JavaScript function in you linked .js (e.g., main.js) file to your html file.
window.onpopstate = function () {
if (location.hash !== "") {
const hash = location.hash;
// Deactivating existing active 'section'
document.querySelector(".section.active").classList.add("hide");
document.querySelector(".section.active").classList.remove("active");
// Activating new 'section'
document.querySelector(hash).classList.add("active");
document.querySelector(hash).classList.remove("hide");
}
}