{"id":23701102,"url":"https://github.com/ehanlin/frame-observer","last_synced_at":"2025-09-03T05:32:04.641Z","repository":{"id":30431359,"uuid":"33984347","full_name":"eHanlin/frame-observer","owner":"eHanlin","description":"This is iframe observer. Be Able to use it when you need get frame states or event listeners.","archived":false,"fork":false,"pushed_at":"2024-03-29T02:58:04.000Z","size":291,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-12-28T19:03:33.730Z","etag":null,"topics":["cross-domain","event-emitter","frame","frame-observer","iframe","javascript","promise","trigger"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eHanlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-15T09:12:56.000Z","updated_at":"2023-08-13T19:00:00.000Z","dependencies_parsed_at":"2023-01-14T16:56:58.172Z","dependency_job_id":null,"html_url":"https://github.com/eHanlin/frame-observer","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fframe-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fframe-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fframe-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fframe-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eHanlin","download_url":"https://codeload.github.com/eHanlin/frame-observer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231837511,"owners_count":18433979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cross-domain","event-emitter","frame","frame-observer","iframe","javascript","promise","trigger"],"created_at":"2024-12-30T09:31:58.457Z","updated_at":"2024-12-30T09:31:58.925Z","avatar_url":"https://github.com/eHanlin.png","language":"JavaScript","readme":"frame observer [![npm package][npm-badge]][npm] [![Travis][build-badge]][build] [![codecov][codecov-badge]][codecov] \n==================================\n\nThis is iframe observer. Be Able to use it when you need get frame states or event listeners.\n\nYou need to add [polyfill](https://github.com/JasonBerry/babel-es6-polyfill) script if your browser is not support es6.\n\n## Install\n\n```bash\nbower install frame-observer\n```\n\n## Install node modules\n\n```bash\nnpm install frame-observer\n```\n\n## Usage\n\nindex.html\n\n```js\nvar iframe = document.querySelector('iframe');\nvar promise = frameObserver.callMethod( iframe, \"info\", {a:3} );\n\npromise.then(function(){\n  console.log( arguments );\n});\n```\n\nframe.html\n\n```js\nframeObserver.registerMethods({\n\n  info:function( promise ){\n    promise.resolve(1);\n  }\n});\n```\n\n## API\n\n### frameObserver\n\n##### readyState( iframe, stateName ):Promise\n\u003e listen a state from frame, promise will be trigger when state is resolved or rejected.\n\n```js\nvar iframe = document.querySelector('iframe');\n\nframeObserver\n.readyState( iframe, 'ready' )\n.then(function(){\n  console.log('ready state:done...');\n},function(){\n  console.log('ready state:fail...');\n});\n```\n\n##### resolveState( stateName, params... )\n\u003e trigger a state for resolve.\n\n```js\nframeObserver.resolveState('ready');\n```\n\n##### rejectState( stateName, params... )\n\u003e trigger a state for reject.\n\n```js\nframeObserver.rejectState('ready');\n```\n\n##### on( iframe, eventName, func )\n\u003e listen a event from frame.\n\n```js\nvar iframe = document.querySelector('iframe');\n\nframeObserver.on( iframe, 'iframeClicked', function(){\n  console.log('iframe clicked');\n});\n```\n\n##### off( iframe, eventName, func )\n\u003e unregister a event from frame.\n\n```js\nframeObserver.off( iframe, 'iframeClicked', iframeClicked );\n```\n\n##### registerMethods( methods )\n\u003e implement some methods for other iframes. The method inputs will inject `promise` and `parameters`.\n\n```js\nframeObserver.registerMethods({\n  hello:function(promise, parameter1, parameter2 ...){\n    console.log('hello by self');\n  }\n});\n```\n\n##### callMethod( iframe, methodName, params... ):Promise\n\u003e call a method of iframe or parent.\n\n```js\nvar promise = frameObserver.callMethod( iframe, \"hello\", {a:3} );\n\npromise.then(function(){\n  console.log( arguments );\n});\n```\n\n##### trigger( name, params... )\n\u003e trigger a event\n\n```js\nframeObserver.trigger( 'clicked' );\n```\n\n##### getContext(el):FrameObserverContext\n\u003e get a el context\n\n```js\nframeObserver.getContext(iframe);\n```\n\n### FrameObserverContext\n\n##### on(eventName, func)\n\u003e listen a event from context.\n\n##### off(eventName, func)\n\u003e unregister a event from context.\n\n\n##### readyState(stateName):Promise\n\u003e listen a state from context.\n\n##### callMethod(methodName, params...):Promise\n\u003e call a method of context.\n\n##### getElement():HTMLElement\n\u003e get a element from context.\n\n## Run Server\n\n```bash\nnpm run dev\n```\n\n## Build minfy\n\n```bash\nnpm run build\n```\n\n## Test\n\n```bash\nnpm run test\n```\n\n[npm-badge]: https://img.shields.io/npm/v/frame-observer.svg?style=flat-square\n[npm]: https://www.npmjs.com/package/frame-observer\n \n[build-badge]: https://img.shields.io/travis/eHanlin/frame-observer/master.svg?style=flat-square\n[build]: https://travis-ci.org/eHanlin/frame-observer\n \n[codecov-badge]: https://codecov.io/gh/eHanlin/frame-observer/branch/master/graph/badge.svg\n[codecov]: https://codecov.io/gh/eHanlin/frame-observer\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehanlin%2Fframe-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fehanlin%2Fframe-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehanlin%2Fframe-observer/lists"}