Comments (4)
Hello,
I ran into this issue with iframes as well and ended up creating my own custom InterruptSource based on DocumentInterruptSource
except instead of having the first argument hard-coded as document.documentElement
, it accepts an element in the constructor to accept an iframe's contentDocument
property (e.g. this.myIframe.nativeElement.contentDocument
).
While not the official way of doing this, something like this should work:
app.component.ts
import { Idle, DEFAULT_INTERRUPTSOURCES } from "@ng-idle/core";
export class AppComponent {
...
loadFrame() {
this.myPageIFrame.nativeElement.addEventListener('load', () => {
const el = this.myPageIFrame.nativeElement.contentDocument;
this.setInterruptSource(el);
});
}
unloadFrame() {
// clean-up iframe
this.setInterruptSource(); // resets back to initial interrupt(s) without the custom interrupt for the iframe
}
setInterruptSource(elementForInterrupt?: ElementRef): void {
const interrupts = [ ...DEFAULT_INTERRUPTSOURCES ];
if (elementForInterrupt) {
const interrupt = new CustomDocumentInterruptSource(elementForInterrupt);
interrupts.push(interrupt);
}
this.idle.stop(); // stop watchers
this.idle.setInterrupts(interrupts);
this.idle.watch(); // restart watchers with new interrupt(s)
}
}
This will create an instance of CustomDocumentInterruptSource
with the iframe's contentDocument
. It will stop the idle watchers, set the interrupts (including new interrupt(s), and then restart the watchers (I'm not clear if you have to stop
and then start
, or just re-call start
).
CustomDocumentInterruptSource.ts
import { EventTargetInterruptSource, EventTargetInterruptOptions } from "@ng-idle/core";
import { ElementRef } from "@angular/core";
/*
* Custom interrupt source that uses events on the document element (html tag).
*
* This has been modeled after DocumentInterruptSource that hardocdes `document.documentElement`
* as the first argument. We may need to create a custom interrupt from the document of another frame
* other than the document on window.
*
* Original source for DocumentInterruptSource: https://github.com/HackedByChinese/ng2-idle/blob/master/modules/core/src/documentinterruptsource.ts
*/
class CustomDocumentInterruptSource extends EventTargetInterruptSource {
constructor(el: ElementRef, events: string = DEFAULT_EVENTS, options?: number | EventTargetInterruptOptions) {
super(el, events, options);
}
/*
* Checks to see if the event should be filtered.
* @param event - The original event object.
* @return True if the event should be filtered (don't cause an interrupt); otherwise, false.
*/
filterEvent(event: any): boolean {
// some browser bad input hacks
if (event.type === 'mousemove'
// fix for Chrome destop notifications
&& ((event.originalEvent && event.originalEvent.movementX === 0 &&
event.originalEvent.movementY === 0)
// fix for webkit fake mousemove
|| (event.movementX !== void 0 && !event.movementX || !event.movementY))) {
return true;
}
return false;
}
}
const DEFAULT_EVENTS: string = 'mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove scroll';
export default CustomDocumentInterruptSource;
from ng2-idle.
It looks like CKEditor uses IFRAMEs. @ng-idle
will not be able to attach to those and listen for your input events because they are on a separate document. You'll likely need to create your own component or directive that takes in Idle
service as a dependency, and - after the CKEditor is initialized - uses the CKEditor/DOM to listen to the desired events and call Idle.interrupt()
.
from ng2-idle.
Hi, I'm just beginning
So do you have the main code for this example??
I wanna to use IDLE with Iframes
from ng2-idle.
I tried with @benbabics solution. It's adding the the custom source into exiting one. But it's not working. I think some small changes have to be made.
from ng2-idle.
Related Issues (20)
- Interrupt sources for Angular Electron application HOT 1
- Support for Angular 12+? HOT 2
- @ng-idle/[email protected] requires @ng-idle/core^11.0.0 HOT 1
- idleTimeoutWarning lags wall-clock when tab is in background) HOT 8
- Question: Does ng-idle still work even after user closed tab/closes browser? HOT 2
- remove mousemove etc events from Ng-Idle
- js setInterval continuing interrupting idletime HOT 2
- INTERRUPTS Changing HOT 2
- Update to Angular 13's new package format and compile with partial-ivy HOT 5
- idle stop not stopping idle watch. HOT 1
- Implement a privacy preserving mode functionality avoiding usage of the persistent browser localStorage
- Package version in npm registry HOT 2
- Release version 12 HOT 9
- ng2-idle pauses when the tab is in the background HOT 3
- Add support for Angular 16 HOT 5
- ng2-idle move on multiple tabs screen stuck
- Re-set the idle period setting HOT 3
- Configure Timeout to not check for idle, just countdown HOT 6
- Add support for Angular 17 HOT 5
- idleExpiry compare UTC and local time
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng2-idle.