Top level window focus/blur events - javascript

I have a simple frameset like
<frameset rows="100, 200">
<FRAME name="listener" src="frame1.html">
<FRAME name="content" src="http://www.someexternalurl.com/">
</frameset>
In the listener form trying to listen to the top window focus / blur:
<body>
<div id="szamlalo">30</div>
</body>
<script type="text/javascript">
var inFocus = true;
var counter = 30;
var timer;
$(document).ready(function(){
$(window.top).focus(function(){
//$(window.top).focusin(function(){
inFocus = true;
});
$(window.top).blur(function(){
//$(window.top).focusout(function(){
inFocus = false;
});
timer = window.setInterval("countdown()",1000);
});
function countdown()
{
if (counter > 0)
{
if (inFocus)
counter--;
}
else
{
window.clearInterval(timer);
window.location.href='masik_oldal.html';
}
$('#szamlalo').html(counter);
}
</script>
But aparently the major browsers all handles this differently, opera is the only one it works as expected. In IE the blur isn't received at all, chrome and firefox receive it only once...is this simply the different js engine implementation, or something in jquery? Or i made a mistake somewhere?
Thanks for any idea

Events do not bubble up the frameset tree. You need to install separate handlers for each window (frame)

Related

javascript onblur / onfocus with iframe not working issues

I use onblur and onfocus function in my page.
But also, I use a iframe into page.
And my problem is onblur and andfocus functions not working together into page if I use a iframe.
I clicked in iframe when onblur function is working.But I dont want this function work if I clicked in iframe. I want to run only work it if user will change browser tab
if I will use hasFocus function and users changes browser tab , this time onblur is not working
my js codes:
var after_title = 'Back to page';
var dafault_title = document.title;
var deg;
window.onblur = function () { document.title = after_title; beep(); deg=setTimeout(check,2000); }
window.onfocus = ()=>(deg)?clearTimeout(deg):null;
function beep() {
var snd = new Audio("data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYU=");
snd.play();
}
function check()
{
if(document.hasFocus()){
document.title = dafault_title;
return;
}else{
location.href = './index.php';
}
}
<html>
<head>
<title>Demo Page</title>
</head>
<body>
<br><br><br>default page<br><br><br>
<br><br><br><br>
<iframe id="abc" name="abc" frameborder="1" marginwidth="0" marginheight="0" framespacing="0" width="100px" height="100px">
<p>example include page</p>
</iframe>
</body>
</html>
In order to react to tabchange, don't use the blur and focus events, but rather the Page Visibility API instead:
function handleVisibilityChange() {
if (document.hidden) { // equivalent to "blur"
document.title = after_title; beep(); deg=setTimeout(check,2000);
} else { // equivalent to "focus"
if (deg) {
clearTimeout(deg);
}
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);

Detect auto-click on a page

I'm trying to develop a library that try to detect auto-click on a page.
The library will be imported on several different pages, some will have jquery, some other will not, or will have other different libraries, so my solution should be vanilla javascript.
the goal is to have several security layers, and the first one will be in javascript, this library will not be the only counter measure against auto-click, but should provide as much informations as possible.
The idea is to intercept all click and touch events that occur on the page, and if those events are script generated, something will happen (should be a ajax call, or setting a value on a form, or setting a cookie or something else, this is not important at this stage).
I've write a very simple script that checks for computer generated clicks:
(function(){
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
try{
document.querySelector('body').addEventListener('click', function(evt) {
console.log("which", evt.which);
console.log("isTrusted", evt.isTrusted);
}, true); // Use Capturing
}catch(e){
console.log("error on addeventlistener",e);
}
}
}
}());
I saw this working on a html page without any other js in it, but since I added this javascript to test the auto-click detection simply "nothing" happens, and with nothing I mean both autoclick and detection.
The same code as follow, if used in the console, is working fine, and events are intercepted and evaulated.
this is the script used:
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
//1 try
el = document.getElementById('target');
if (el.onclick) {
el.onclick();
} else if (el.click) {
el.click();
}
console.log("clicked")
}
//2 try
var d = document.createElement('div'); d.style.position = 'absolute'; d.style.top = '0'; d.style.left = '0'; d.style.width = '200px'; d.style.height = '200px'; d.style.backgroundColor = '#fff'; d.style.border = '1px solid black'; d.onclick = function() {console.log('hello');}; document.body.appendChild(d);
}
the html page is very simple:
<body>
<h1>Hello, world!</h1>
<div id="target"> aaaaa </div>
</body>
and for test purposes I added the detection library in head, while the "autoclick" code is just behind the </body> tag.
I guess the problem is in "how I attach the event handler", or "when", so what I'm asking is what can I do to intercept clicks events "for sure", the idea is to intercept clicks on every element, present and future, I don't want to prevent them, just be sure to intercept them somehow.
Of course I cannot intercept those events that has been prevented and do not bubble, but I'd like to "try" to have my js "before" any other.
Do you have some idea about this?
jsfiddle of example
Using document.onreadystatechange will only work as expected in simple scenerios when no other third party libraries are included. Wrap you code inside the native DOMContentLoaded event.
document.addEventListener("DOMContentLoaded",function(){
document.body.addEventListener('click', function(evt) {
if (evt.target.classList.contains('some-class')) {} // not used
console.log("which", evt.which);
console.log("isTrusted", evt.isTrusted);
}, true);
//this is the autoclick code!
el = document.getElementById('target');
if (el.onclick) {
el.onclick();
} else if (el.click) {
el.click();
}
console.log("clicked")
});
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="target"> aaaaa </div>
</body>
</html>
If you look at the event param passed to the function on a click, or whatever other event, you can look for the following which is a telltale sign that the clicker ain't human...
event.originalEvent === undefined
From what you've said I'd use the following to track clicks...
$(document).on("click", function(event){
if(event.originalEvent.isTrusted){
//not human
}else{
//human
}
});
Can you check if both a click event and either a mouseup or touchend event happen within 100 ms of each other? If they don't it's likely an automated event.
let mouseuportouchend = false;
let click = false;
let timer = null;
const regMouseupOrTouchend = function(){
mouseuportouchend = true;
if (!timer) timer = setTimer();
}
const regClick = function(){
click = true;
if (!timer) timer = setTimer();
}
const setTimer = function(){
timer = setTimeout(()=>{
if (click && mouseuportouchend) console.log("Manual");
else console.log ("Auto");
click=false;
mouseuportouchend=false;
timer=null;
}, 100)
}
let el = document.getElementById('target');
el.addEventListener("click",regClick);
el.addEventListener("mouseup", regMouseupOrTouchend);
el.addEventListener("touchend", regMouseupOrTouchend);

How to disable iframe right click for every website

I have a problem about right click for the iframe. I've done it for the default url of the IFrame but when i displayed any other webpage right click can be usable. I have used those sample codes,
document.onmousedown = disableclick;
status = "Right Click Disabled";
function disableclick(event) {
if (event.button == 2) {
return false;
}
}
function disableContextMenu()
{
document.getElementById("myFrame").contentWindow.document.oncontextmenu = function () { return false; };
}
Here is the iframe
<iframe id="myFrame" name="myFrame" width="1603" height="1064" style="border:none;" src="Iframe.aspx" onload="disableContextMenu();" oncontextmenu="return false"></iframe>
I found the css code "pointer-events:none" but i makes the frame unclickable.
include jquery and then apply this
$( document ).ready(function() {
$('#myFrame').on('contextmenu', function(e) {
e.preventDefault();
});
});
thanks
hope this help

dynamically set iframe src

I have a program which will dynamically set an iframe src to load pages. I need to hook a event handler for the page completely loaded. How can i do it? Thanks!
<script type="text/javascript">
function iframeDidLoad() {
alert('Done');
}
function newSite() {
var sites = ['http://getprismatic.com',
'http://gizmodo.com/',
'http://lifehacker.com/']
document.getElementById('myIframe').src = sites[Math.floor(Math.random() * sites.length)];
}
</script>
<input type="button" value="Change site" onClick="newSite()" />
<iframe id="myIframe" src="http://getprismatic.com/" onLoad="iframeDidLoad();"></iframe>
Example at http://jsfiddle.net/MALuP/
Try this:
top.document.getElementById('AppFrame').setAttribute("src",fullPath);
Try this...
function urlChange(url) {
var site = url+'?toolbar=0&navpanes=0&scrollbar=0';
document.getElementById('iFrameName').src = site;
}
TEST
You should also consider that in some Opera versions onload is fired several times and add some hooks:
// fixing Opera 9.26, 10.00
if (doc.readyState && doc.readyState != 'complete') {
// Opera fires load event multiple times
// Even when the DOM is not ready yet
// this fix should not affect other browsers
return;
}
// fixing Opera 9.64
if (doc.body && doc.body.innerHTML == "false") {
// In Opera 9.64 event was fired second time
// when body.innerHTML changed from false
// to server response approx. after 1 sec
return;
}
Code borrowed from Ajax Upload
try this code. then 'formId' div can set the image.
$('#formId').append('<iframe style="width: 100%;height: 500px" src="/document_path/name.jpg"' +
'title="description"> </iframe> ');
Try this:
document.frames["myiframe"].onload = function(){
alert("Hello World");
}

Can one set an iframe's src and manipulate its contents afterwards?

My goal is to have a parent page change the src of an iframe from blank to its proper url (as to utilize an onload handler in the iframe at a given point, but that's beside the point) and then manipulate the iframe's contents. However, javascript seems oblivious to any elements of an iframe that aren't on its src when the DOM loads. Is there any way around this?
The setTimeouts are intended to allow the DOM and iframe to load.
edit:fixed some stuff.
Here's the containing page:
<html><head>
<script type="text/javascript">
var done = false;
var theIframe;
window.onload = function () {
setTimeout('stuff()', 2000);
clearTimeout('stuff()');
}
function stuff() {
if (!done) {
theIframe = window.myiframe;
theIframe.src = 'http://localhost/TestStuff/redirectIframe.jsp';
done = true;
stuff();
} else {
theIframe.setMe = true;
}
}
</script>
</head>
<body>
<iframe src="" width="500" height="500" id="myiframe" name="myiframe">
</iframe>
</body>
And here's the iframe:
<html>
<head>
<script type="text/javascript">
var setMe = false;
window.onload = setInterval('checker()', 1000);
function checker() {
alert('hi');
if (setMe) {
window.onload = null;
top.location = 'http://www.google.com';
alert('foundit');
} else alert('a');
}
</script>
</head>
<body></body>
</html>
Any ideas?
In this piece of code:
theIframe.src = ...;
stuff();
you're calling stuff() immediately, contrary to what you have described, so in fact you're not allowing any time for the page to load. Maybe you're confused about how setTimeout works: it just schedules a single execution after the specified time, it doesn't automatically delay all calls to a function.
Also, you can use clearTimeout only with a previous ID returned by setTimeout, not with code as you have now.
Try something like this:
window.onload = function() {
loadFrame();
}
function loadFrame() {
theIframe = ...;
theIframe.src = ...;
setTimeout(setSomething, 2000);
}
function setSomething() {
theIframe.setMe = true;
}

Categories