How Can I Resize an Iframe from a Different Domain Using postMessage?

Resizing an Iframe from a Different Domain using postMessage

Attempts to resize an iframe from a different domain can be a challenging task. While using easyXDM serves as an effective fallback for non-HTML5 compliant pages, there are alternative solutions worth considering.

One such solution is utilizing postMessage. This method involves passing the height of the child page to the parent page, which then adjusts the height of the iframe accordingly.

Implementation Details

Child Page

• Calculate the height of the child page using document.getElementById('element_id).scrollHeight.
• Post the height to the parent page using parent.postMessage(actual_height,"*");. The asterisk allows posting to any parent iframe regardless of domain.

<script>
function adjust_iframe_height(){
    var actual_height = document.getElementById('element_id').scrollHeight;
    parent.postMessage(actual_height,"*"); 
    //* allows this to post to any parent iframe regardless of domain
}
</script>

 
//call the function above after the content of the child loads

Parent Page

• Add an event listener to the parent window to receive the message from the child page. Replace iframe_id with your iframe ID.
• Update the height of the iframe based on the received height.

<script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
  document.getElementById('iframe_id').height = e.data + 'px';
},false);
</script>

Benefits of Using postMessage

• Cross-Domain Communication: postMessage allows communication between different domains, making it suitable for resizing iframes from a different origin.
• Height Calculation: The child page accurately calculates its height and conveys it to the parent page, ensuring proper iframe resizing.
• Simplicity: The implementation is straightforward and requires minimal code modifications.

The above is the detailed content of How Can I Resize an Iframe from a Different Domain Using postMessage?. For more information, please follow other related articles on the PHP Chinese website!