Iframe vs. Mousemovement - or: the parent-child conflict

Question

First of all my project has quite tough restrictions:

offline availability
as simple coding as possible

=> PHP and other languages are not an option - only html and javascript.

Structure:

index.html
frame.html

The index.html contains:

an simple iframe:

< iframe width="100%" height="100%" src="frame.html" frameborder="0">
< /iframe>

JavaScript for disabling right mouse clicks:

< script language="javascript"> document.onmousedown=disableclick;
status="Right Click Disabled"; function disableclick(event) {
if(event.button==2) {
alert("TEST");
return false; } }
< /script>

Another JavaScript for detecting when the user is not active:

< script> var timeoutID; function setup() {
this.addEventListener("mousemove", resetTimer, false);
this.addEventListener("mousedown", resetTimer, false);
this.addEventListener("keypress", resetTimer, false);
this.addEventListener("DOMMouseScroll", resetTimer, false);
this.addEventListener("mousewheel", resetTimer, false);
this.addEventListener("touchmove", resetTimer, false);
this.addEventListener("MSPointerMove", resetTimer, false);>
startTimer(); } setup(); function startTimer() {
// wait X seconds before calling goInactive
timeoutID = window.setTimeout(goInactive, 3000); } function resetTimer(e) {
window.clearTimeout(timeoutID);
goActive(); } function goInactive() {
// do something
alert("TIMEOUT");
return false; } function goActive() {
// do something
startTimer(); }
< /script>

The css-file also contains some restrictions for the mouse cursor:

body {
background-color: #f0f0f0;
cursor: none !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none; user-select: none;
}

=> This works quite well for the index.html - but not for the iframe (which is at the moment a local file in the same directory, but it should also be able to link on a website).

I have tried several workarounds but none of them worked while keeping the website in the iframe alive (so that you can also browse through the content of the frame.html).

I am open to any solution - if it hands over the scripts to the child or if the child gets the scripts from the parent or any overlay solution. If there is a workaround for the iframe redirecting on an offline file in the same directory - this would be fine for the first moment.

Thank you very much in advance!

EDIT:

Still got problems with this - it comes to a neverending loop:

$('iframe').load(function(){
  $(this).contents().find("body").mousemove(function(){
var timeoutID;
function setup() {
    this.addEventListener("mousemove", resetTimer, false);
    this.addEventListener("mousedown", resetTimer, false);
    this.addEventListener("keypress", resetTimer, false);
    this.addEventListener("DOMMouseScroll", resetTimer, false);
    this.addEventListener("mousewheel", resetTimer, false);
    this.addEventListener("touchmove", resetTimer, false);
    this.addEventListener("MSPointerMove", resetTimer, false);
    startTimer();
}
setup();

function startTimer() {
    timeoutID = (this).setTimeout(goInactive, 4000);
}

function resetTimer(e) {
    (this).clearTimeout(timeoutID);
    goActive();
}

function goInactive() {
     alert("TIMEOUT");
     return false;
     goactive;
}

function goActive() {         
    startTimer();
}
    });
});
$('iframe').attr("src","JavaScript:'iframe content'");

Will you always have control of the page in the iframe or will you want to embed arbitrary pages? You should probably put the event listeners that you are interested in in the frame but you can only do this if you have control over its contents. — kar288, Apr 06 '16 at 11:22
Thank you for your reply - at the moment I have full control over the page in the iframe. But for future purposes a link on a foreign website would also be great. At the moment the timeout is only connected with an alert. But I want the website to jump to the starting page (of the parent site!) after XX seconds of inactivity. How is this possible by implementing the scripts in the frame.html? — EC_Andrew, Apr 06 '16 at 11:27
Another solution could of course be to eliminate the iframe - but I don't know how since PHP is not working...? — EC_Andrew, Apr 06 '16 at 12:03

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

I have done this with jQuery. Link.

Problem is you can't do this cross domain when your iframe.html is not in your domain.

edited May 23 '17 at 11:59

Community

1
1

answered Apr 06 '16 at 11:36

Nalipu

66
5

Unfortunately this doesn't work for me... Could you please tell me how to do integrate the mentioned java scripts? => https://jsfiddle.net/khed9gx5/ – EC_Andrew Apr 06 '16 at 12:38
What problem do you have? I think everything is explained in the link. You need to add jQuery.js to your index.html of course for jQuery to work. But like i said you get a problem if you want to load content in your iFrame that is not in your domain. – Nalipu Apr 06 '16 at 12:45
My problem is to integrate the two scripts (disable right click and the timer) in jQuery. I am not a professional - that's why I'm using this webportal. – EC_Andrew Apr 06 '16 at 13:05
Integrating "disable right click" is ok - but the timer is still the problem. See the edit in my original post. Do you have any ideas? – EC_Andrew Apr 07 '16 at 06:02

Iframe vs. Mousemovement - or: the parent-child conflict

1 Answers1