Create dynamic iframe with auto height

Sometimes we need to create an dynamic iframe with height auto init. I will put a code to create a dynamic iframe inside a modal and add the code to auto height for iframe and modal.

var doc = document.getElementById('iframe_messages').contentWindow.document;
	doc.open();
	doc.innerHTML = "";
	doc.write(message);
	doc.close();
	$("#emailContentModal").modal({
		show: true
	});
	$("#emailContentModal .modal-body").css("height", "")
	$("#iframe_messages").css("height", "")
	$('#emailContentModal').on('shown.bs.modal', function () {
		var messageHeight = $('#iframe_messages').contents().find('html').height();
		var iframeHeight = $('#iframe_messages').height();
		if(iframeHeight < messageHeight) {
			$('#iframe_messages').height(messageHeight);
			$("#emailContentModal .modal-body").height(messageHeight + 100)
		}
	})

<div class="modal fade emailpp" id="emailContentModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Email Message </h4>
            </div>
            <div class="modal-body">
                <div id="email_body_content">
                    <h4><span class="normal">Recipient:</span> <span id="receipt_email"></span></h4>
                    <h5>Subject: <span id="subjec_email"></span></h5>
                    <iframe id="iframe_messages" class="iframes_emails" height="600px" width="700px" src="about:blank"></iframe>
                </div>
                <!-- /#email_body_content -->
            </div>
        </div>
    </div>
</div>