scagood/1.iFrame.Relative.Messages.md

## 1.iFrame.Relative.Messages.md

      
    Raw
  

              1.iFrame.Relative.Messages.md
            
          
    Attach message events to iframe elements

Usage

Very simply copy/download and include iframe.message.js into your document, then start attatching event listeners.
Example inclusions:
<script src="iframe.message.js"></script>
Or:
<script>
    window.addEventListener('message', e => {
        document.querySelectorAll('iframe').forEach(frame => {
            if (frame.contentWindow === e.source) {
                frame.dispatchEvent(
                    new MessageEvent('message', e)
                )
            }
        });
    });
</script>

  
## 2.iframe.message.js
window.addEventListener('message', e => {
    document.querySelectorAll('iframe').forEach(frame => {
        if (frame.contentWindow === e.source) {
            frame.dispatchEvent(
                new MessageEvent('message', e)
            )
        }
    });
});

## 3.example.frame.html
<script>
    let c = 0;

    // Every second
    setInterval(
        () => parent.postMessage(
            // Send 'Hello #1'
            'Hello #' + (c++),
            // Quick iframe parent origin.
            // This, assuming that referrer is at document root.
            document.referrer
        ),
        1000
    );
</script>

## 4.example.element.html
<html>
    <head>
        <script src="iframe.message.js"></script>
        <script>
            window.addEventListener('load', function () {
                // 'Select' the iframe
                const iframe = document.querySelector('iframe');

                // Add the event directly to the iframe element.
                iframe.addEventListener('message', msg => {
                    console.log('Recieved message:', msg.data);
                })
            });
        </script>
    </head>
    <body>
        <iframe src="example.frame.html"></iframe>
    </body>
</html>

## 5.example.generated.html
<html>
    <head>
        <script src="iframe.message.js"></script>
        <script>
            // Make an iframe in 1 second
            setTimeout(function () {
                // Make an iframe
                var iframe = document.createElement("iframe");
                iframe.src = 'example.frame.html';

                // Add the event directly to the iframe element.
                iframe.addEventListener('message', msg => {
                    console.log('Recieved message:', msg.data);
                })

                // Place the iframe in the body.
                document.body.appendChild(iframe);
            }, 1000)
        </script>
    </head>
    <body></body>
</html>

## 6.example.mixed.html
<html>
    <head>
        <script src="iframe.message.js"></script>
        <script>
            window.addEventListener('load', function () {
                // 'Select' the iframe
                const iframe = document.querySelector('iframe');

                // Add the event directly to the iframe element.
                iframe.addEventListener('message', msg => {
                    console.log('IFrame 1:', msg.data);
                })
            });

            setTimeout(function () {
                var iframe = document.createElement("iframe");
                iframe.src = 'example.frame.html';

                iframe.addEventListener('message', msg => {
                    console.log('IFrame 2:', msg.data);
                    // msg.source.postMessage('test', msg.origin);
                })

                document.body.appendChild(iframe);
            }, 1000)
        </script>
    </head>
    <body>
        <iframe src="example.frame.html"></iframe>
    </body>
</html>
	window.addEventListener('message', e => {
	document.querySelectorAll('iframe').forEach(frame => {
	if (frame.contentWindow === e.source) {
	frame.dispatchEvent(
	new MessageEvent('message', e)
	)
	}
	});
	});
	<script>
	let c = 0;

	// Every second
	setInterval(
	() => parent.postMessage(
	// Send 'Hello #1'
	'Hello #' + (c++),
	// Quick iframe parent origin.
	// This, assuming that referrer is at document root.
	document.referrer
	),
	1000
	);
	</script>
	<html>
	<head>
	<script src="iframe.message.js"></script>
	<script>
	window.addEventListener('load', function () {
	// 'Select' the iframe
	const iframe = document.querySelector('iframe');

	// Add the event directly to the iframe element.
	iframe.addEventListener('message', msg => {
	console.log('Recieved message:', msg.data);
	})
	});
	</script>
	</head>
	<body>
	<iframe src="example.frame.html"></iframe>
	</body>
	</html>