I wanted to automatically resize the content of an iframe for one of my projects. I tried several solutions and done several google searches to find a working solution for my issue. I got the initiative from here and it helped me to achieve what I needed.
Parent page
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous">
</script>
<script type="text/javascript">
// addEventListener support for IE8
function bindEvent(element, eventName, eventHandler) {
if (element.addEventListener) {
element.addEventListener(eventName, eventHandler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, eventHandler);
}
}
// Listen to message from child window
bindEvent(window, 'message', function (e) {
var height = parseInt(e.data.height);
if (!isNaN(height)) {
$('iframe[id="frame1"]').css('height', height + 'px');
}
});
</script>
<head>
<body>
<iframe id="ConnXCareersFrame1" src="https://abcd.com/index.html" width="1000" frameborder="0" scrolling="no"></iframe>
<body>;
Child page
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous">
</script>
<script type="text/javascript">
var height =$('body,html').outerHeight() ;
window.parent.postMessage({
'height': height
}, "*");
</script>
<head>
<body>
<div>
<!--content here -->
</div>
<body>;
Cheers,
Samitha
No comments:
Post a Comment