Accessing callbacks in an iframe
This documentation provides instructions and sample code for accessing median callback data within an iframe. For clarity, all styling classes and attributes have been omitted.
Disclaimer
This documentation provides a proof of concept for accessing median callback data within an iframe. We advise reviewing the implementation with your security team, as your parent page, along with the callback function that sends data to the iframe, may be publicly accessible. It is strongly recommended to follow best practices to prevent any potential data leaks.
Parent Page Setup
In order to support callbacks you will need to define a deviceInfoCallback
function which is invoked by the iframe and sends the data to the iframe.
<body>
<div>
// Define the inline frame to host an iframe
// IFRAME_URL is a placeholder for the URL of your iframe
<iframe src="IFRAME_URL" id="iframe"></iframe>
</div>
<script>
// Define the deviceInfoCallback function that sends data to the iframe
function deviceInfoCallback(deviceInfo) {
const iframe = document.getElementById('iframe');
const message = { action: 'populateTextarea', deviceInfo: deviceInfo };
// Use postMessage to send data to the iframe
iframe.contentWindow.postMessage(message, '*');
}
</script>
</body>
Iframe Setup
The iframe must implement a command using a custom URL protocol and be configured to listen for messages from the parent window.
<body>
<div>
<h1>Iframe Page</h1>
<button id="runDeviceInfo">Run Device Info</button>
<textarea id="deviceInfoOutput" placeholder="Device info will appear here..."></textarea>
</div>
<script>
const button = document.getElementById('runDeviceInfo');
// Event listener for button click
button.addEventListener('click', () => {
// Trigger the custom URL protocol
window.location.href = 'median://run/median_device_info?callback=deviceInfoCallback';
});
// Listen for messages from the parent window
window.addEventListener('message', (event) => {
if (event.data.action === 'populateTextarea') {
// Populate the textarea with device info received from the parent window
document.getElementById('deviceInfoOutput').value = JSON.stringify(event.data.deviceInfo);
}
});
</script>
</body>
Demo App
The following demo applications for iOS and Android demonstrate the behavior based on the provided code snippets above.
iOS
More iOS devicesAndroid
More Android devicesUpdated 29 days ago