iframe-adjuster 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +39 -0
  2. package/assets/style.css +3 -0
  3. package/examples/iframe.html +43 -0
  4. package/examples/index.html +24 -0
  5. package/package.json +14 -0
  6. package/src/main.js +24 -0
  7. package/src/modules/iFrameContent.js +81 -0
  8. package/src/modules/iFrameParent.js +55 -0
  9. package/vite.config.js +24 -0
package/README.md ADDED
@@ -0,0 +1,39 @@
1
+ # iFrame Adjuster
2
+ A tiny no-config javascript plugin for resizing the height of iFrame elements when the iFrame's content changes size.
3
+
4
+ - handles multiple iframes per page
5
+ - handles iframes that reload (e.g. form submits)
6
+ <br><br>
7
+
8
+ This plugin will ALWAYS be free and open-source. It can be used for commercial projects with no restrictions.
9
+ <br><br>
10
+
11
+ ## How to use:
12
+ **NPM package coming soon**
13
+
14
+ 1. Add iFrame Adjuster to both the page and the iframe:
15
+
16
+ **Import from NPM**:
17
+ `import 'iframe-adjuster';` <br><br>
18
+
19
+ **or load it from the CDN:**<br>
20
+ ```<script type="text/javascript" src="{{://cdn-tbd}}/dist/iframe-adjuster.min.js"></script>```
21
+ <br><br>
22
+
23
+ 2. Call `iFrameAdjuster()` on the page once, anytime after the Document is ready.
24
+
25
+ ```javascript
26
+ document.addEventListener("DOMContentLoaded", () => {
27
+ iFrameAdjuster();
28
+ });
29
+ ```
30
+
31
+ > It's not necessary to call `iFrameAdjuster()` from within the iFrame.
32
+
33
+ <br>
34
+
35
+ ## Throw me a bone:
36
+ https://www.buymeacoffee.com/interactiverob
37
+
38
+ ## Author:
39
+ Rob Kirkner
package/assets/style.css ADDED
@@ -0,0 +1,3 @@
1
+ iframe{
2
+ min-height: 300px;
3
+ }
package/examples/iframe.html ADDED
@@ -0,0 +1,43 @@
1
+ <!DOCTYPE html>
2
+ <html class="no-js" lang="">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="x-ua-compatible" content="ie=edge" />
6
+ <title>iFrame Adjuster</title>
7
+ <meta name="description" content="" />
8
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
9
+
10
+ <link rel="stylesheet" href="/assets/style.css" />
11
+ <script src="/dist/iframe-adjuster.min.js"></script>
12
+ </head>
13
+
14
+ <body style="background-color: blue; color: white;">
15
+ <h3>I am the iframe</h3>
16
+
17
+ <button onclick="randomHeight()">Change Height</button>
18
+
19
+ <div class="low-element">
20
+
21
+ </div>
22
+
23
+ <div style="margin-top: 40px;">
24
+ <form action="iframe.html">
25
+ <input type="text" name="test">
26
+ <button type="submit">Submit</button>
27
+ </form>
28
+ </div>
29
+
30
+ <script>
31
+ let randomHeight = () => {
32
+ let element = document.querySelector('.low-element');
33
+ let newHeight = randomInteger(150, 1000);
34
+
35
+ element.style.height = `${newHeight}px`;
36
+ };
37
+
38
+ function randomInteger(min, max) {
39
+ return Math.floor(Math.random() * (max - min + 1)) + min;
40
+ }
41
+ </script>
42
+ </body>
43
+ </html>
package/examples/index.html ADDED
@@ -0,0 +1,24 @@
1
+ <!DOCTYPE html>
2
+ <html class="no-js" lang="">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="x-ua-compatible" content="ie=edge" />
6
+ <title>iFrame Adjuster</title>
7
+ <meta name="description" content="" />
8
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
9
+
10
+ <link rel="stylesheet" href="/assets/style.css" />
11
+ <script type="text/javascript" src="/dist/iframe-adjuster.min.js"></script>
12
+ </head>
13
+
14
+ <body>
15
+ <iframe data-iframe-adjust src="iframe.html" frameborder="0"></iframe>
16
+ <iframe data-iframe-adjust src="iframe.html" frameborder="0"></iframe>
17
+
18
+ <script>
19
+ document.addEventListener("DOMContentLoaded", () => {
20
+ iFrameAdjuster();
21
+ });
22
+ </script>
23
+ </body>
24
+ </html>
package/package.json ADDED
@@ -0,0 +1,14 @@
1
+ {
2
+ "name": "iframe-adjuster",
3
+ "description": "Adjusts the height of iFrame elements when the contained content changes size",
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "vite build",
9
+ "preview": "vite preview"
10
+ },
11
+ "devDependencies": {
12
+ "vite": "^7.1.2"
13
+ }
14
+ }
package/src/main.js ADDED
@@ -0,0 +1,24 @@
1
+ import iFrameContent from '@/modules/iFrameContent';
2
+ import iFrameParent from '@/modules/iFrameParent';
3
+
4
+ function init(){
5
+
6
+ //if inside iFrame, run the Content script
7
+ if(window.self !== window.top){
8
+ iFrameContent();
9
+ }
10
+
11
+ const iFrameAdjuster = () => {
12
+ const adjuster = iFrameParent();
13
+ adjuster.init();
14
+ }
15
+
16
+ //create window object
17
+ window.iFrameAdjuster = iFrameAdjuster;
18
+ }
19
+
20
+
21
+ (()=>{
22
+ if(document.readyState == 'interactive') return init();
23
+ document.addEventListener('DOMContentLoaded', init);
24
+ })();
package/src/modules/iFrameContent.js ADDED
@@ -0,0 +1,81 @@
1
+ export let mixin = (config = {}) => {
2
+
3
+ let state = {
4
+ currentHeight: null,
5
+ frameId: null,
6
+ }
7
+
8
+ let module = {
9
+
10
+ //determine height of framed content
11
+ getContentHeight(){
12
+ let allElements = document.querySelectorAll('*');
13
+ if (!allElements.length) return;
14
+
15
+ let heights = [...allElements].map(element => {
16
+ return element.offsetTop + element.offsetHeight;
17
+ });
18
+
19
+ return Math.max(...heights);
20
+ },
21
+
22
+ //check if content height has changed
23
+ heightHasChanged(newHeight){
24
+ return state.currentHeight !== newHeight;
25
+ },
26
+
27
+ //on height change, send new height up to parent
28
+ adjust(){
29
+ if(!state.frameId) return;
30
+
31
+ let contentHeight = this.getContentHeight();
32
+ if(!this.heightHasChanged(contentHeight)) return;
33
+
34
+ state.currentHeight = contentHeight;
35
+
36
+ let message = {
37
+ key: 'iframe-adjuster',
38
+ id: state.frameId,
39
+ height: state.currentHeight,
40
+ };
41
+
42
+ window.parent.postMessage(message, '*')
43
+ },
44
+
45
+ //save frame id
46
+ setId(id){
47
+ state.frameId = id;
48
+ },
49
+
50
+ //on message from parent frame
51
+ onMessage(e){
52
+ let data = e.data;
53
+ if(data.key !== 'iframe-adjuster') return;
54
+
55
+ this.setId(data.id);
56
+ },
57
+
58
+ //check for changes
59
+ loop(){
60
+ requestAnimationFrame(()=>{
61
+ this.adjust();
62
+ this.loop();
63
+ });
64
+ },
65
+
66
+ setEventBindings(){
67
+ window.addEventListener('message', this.onMessage.bind(this));
68
+ },
69
+
70
+ init(){
71
+ this.loop();
72
+ this.setEventBindings();
73
+ },
74
+ }
75
+
76
+ return module.init();
77
+ };
78
+
79
+ export default function init(config) {
80
+ return mixin( config );
81
+ };
package/src/modules/iFrameParent.js ADDED
@@ -0,0 +1,55 @@
1
+ export default function iFrameParent() {
2
+
3
+ let state = {
4
+ frames: document.querySelectorAll('[data-iframe-adjust]'),
5
+ }
6
+
7
+ let module = {
8
+
9
+ setupFrames(){
10
+ [...state.frames].map((frame, index) =>{
11
+
12
+ let frameId = `frame-${index + 1}`;
13
+ let message = {
14
+ key: 'iframe-adjuster',
15
+ id: frameId,
16
+ };
17
+
18
+ frame.setAttribute('data-iframe-id', frameId);
19
+ frame.contentWindow.postMessage(message, '*');
20
+ });
21
+ },
22
+
23
+ getFrameById(id){
24
+ return document.querySelector(`[data-iframe-adjust][data-iframe-id="${id}"]`);
25
+ },
26
+
27
+ onMessage(e){
28
+ let data = e.data;
29
+ if(data.key !== 'iframe-adjuster') return;
30
+
31
+ let frame = this.getFrameById(data.id);
32
+ if(!frame) return;
33
+
34
+ requestAnimationFrame(() => {
35
+ frame.style.height = `${data.height}px`;
36
+ });
37
+ },
38
+
39
+ setEventBindings(){
40
+ window.addEventListener('message', this.onMessage.bind(this));
41
+
42
+ [...state.frames].map(frame => {
43
+ frame.addEventListener('load', this.setupFrames.bind(this));
44
+ });
45
+ },
46
+
47
+ init(){
48
+ if(!state.frames.length) return;
49
+ this.setupFrames();
50
+ this.setEventBindings();
51
+ },
52
+ }
53
+
54
+ return module;
55
+ };
package/vite.config.js ADDED
@@ -0,0 +1,24 @@
1
+ import { defineConfig } from 'vite';
2
+
3
+ /* -- https://vite.dev/config/ -- */
4
+
5
+ export default defineConfig({
6
+ base: './',
7
+ resolve: {
8
+ alias: {
9
+ '@': '/src',
10
+ }
11
+ },
12
+
13
+ build: {
14
+ lib: {
15
+ name: 'iFrameAdjuster',
16
+ entry: ['src/main.js'],
17
+ formats: ['iife'],
18
+ fileName: (format, entryName) => `iframe-adjuster.min.js`,
19
+ },
20
+ watch: {
21
+ include: ['**/*.css', '**/*.js']
22
+ }
23
+ },
24
+ })