@streamplay-dev/iframecommunication NPM

Iframe Communication Example

This project demonstrates how to use the iframeCommunication library for seamless communication between your main application and iframes using vanilla JavaScript.

Overview

The iframeCommunication library allows for easy communication between your main application and iframes. This README provides instructions on how to include and use the library in a vanilla JavaScript application using both npm and a script tag.

Installation Methods

Method 1: Using npm

Install the Library

npm install @friends-casino-tech/iframecommunication

Use the Library in Your JavaScript File

 import IframeCommunication from '@streamplay-dev/iframecommunication';

 document.addEventListener('DOMContentLoaded', () => {
    const url = 'https://streamplay.dev';
    const iframe = document.getElementById('myIframe');
    const iframeCommunication = new IframeCommunication('#myIframe', `${url}${window.location.pathname}`, username);
    iframeCommunication.init();

    // Cleanup on window unload
    window.addEventListener('unload', () => {
       iframeCommunication.cleanup();
    });
 });

Method 2: Using a Script Tag

Add the Script Tag to Your HTML

 <script src="https://unpkg.com/@streamplay-dev/iframecommunication@0.9.0/dist/iframeCommunication.min.js"></script>

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Iframe Communication Example</title>
     <script src="https://unpkg.com/@streamplay-dev/iframecommunication@0.9.0/dist/iframeCommunication.min.js"></script>
 </head>
 <body>
     <iframe
         id="myIframe"
         src="https://streamplay.dev"
         width="100%"
         height="100%"
         allow="camera; microphone; clipboard-write; clipboard-read; compute-pressure; geolocation"
     ></iframe>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const username = "put your username here" //replace this string with your username
             const url = 'https://streamplay.dev';
             const dynamicSrc = `${url}${window.location.pathname}`;
             const iframe = document.getElementById('myIframe');
             iframe.src = dynamicSrc;
 
             iframe.onload = () => {
                 const iframeCommunication = new IframeCommunication('#myIframe', dynamicSrc, username);
                 iframeCommunication.init();
             };
         });
     </script>
 </body>
 </html>

Additional Info

For any questions or support, please contact us at:

Email: tech@friends.casino
Website: friends.casino

Feel free to reach out for any inquiries or feedback regarding the iframeCommunication library!

iframe communication postMessage

acorn acorn-import-attributes ajv ajv-formats ajv-keywords ansi-styles babel-plugin-polyfill-corejs2 babel-plugin-polyfill-corejs3 babel-plugin-polyfill-regenerator browserslist buffer-from caniuse-lite chalk chrome-trace-event clone-deep color-convert color-name colorette commander common-path-prefix convert-source-map core-js-compat cross-spawn debug electron-to-chromium enhanced-resolve envinfo es-module-lexer escalade escape-string-regexp eslint-scope esrecurse estraverse esutils events fast-deep-equal fast-json-stable-stringify fast-uri fastest-levenshtein find-cache-dir find-up flat function-bind gensync glob-to-regexp globals graceful-fs has-flag hasown import-local interpret is-core-module is-plain-object isexe isobject jest-worker js-tokens jsesc json-parse-even-better-errors json-schema-traverse json5 kind-of loader-runner locate-path lodash.debounce lru-cache merge-stream mime-db mime-types ms neo-async node-releases p-limit p-locate p-try path-exists path-key path-parse picocolors pkg-dir punycode randombytes rechoir regenerate regenerate-unicode-properties regenerator-runtime regenerator-transform regexpu-core regjsgen regjsparser require-from-string resolve resolve-cwd resolve-from safe-buffer schema-utils semver serialize-javascript shallow-clone shebang-command shebang-regex source-map source-map-support supports-color supports-preserve-symlinks-flag tapable terser to-fast-properties undici-types unicode-canonical-property-names-ecmascript unicode-match-property-ecmascript unicode-match-property-value-ecmascript unicode-property-aliases-ecmascript update-browserslist-db uri-js watchpack webpack-merge webpack-sources which wildcard yallist yocto-queue

0.9.0

7 months ago