Introduction
IFrame modal window is a technique to show or open a popup on a web browser by keeping the flavor of
a single page application so that the same instance of a page can be created on a single page using a new DOM of an IFrame.
Background
Sometimes the requirement is to show a dialog in separate document of a window. When an application needs to open
the same instance window/modal with different data to show the user multiple times over a single web page, but the same element with
the same ID cannot behave correctly if we use only a div
based modal window, though those are very simple and straightforward.
After a lot of searching on the web, I got a few libraries to overcome the situation. But in a very simple way and if anyone does not want to implement
a new single page application JavaScript library to his or her project, then it could be a workaround or
an alternate solution to overcome the solution very easily.
Using the Code
The below example is to implement an IFrame and the generated URL has to be set to
the IFrame's source. After that, the IFrame will be appended to a parent div
element and then the div
element will be shown.
Code
Let’s talk about the code. Code snippets are formatted using the .Code
style, like so:
Parameters:
url
: URL of the IFrame to load the content of the window, width
: modal width title
: title of the window Id
: id of the object Height
: height of the browser
function OpenWindow (url, width, title, Id,_height) {
var dialogHeight, dialogParentHeight, _parent, framename, currentIFrame;
dialogHeight = _height;
framename = Math.floor((1 + Math.random()) * 0x10000) .toString(16) .substring(1);
currentIFrame =getFrameElement();
if(currentIFrame != null) {
_parent = $(currentIFrame).attr('id');
}
else
{
_parent= "";
}
var iframe = $("<iframe _parentId='" + _parent +
"' name='" + framename + "' frameborder='0'
marginwidth='0' src='about:blank' marginheight='0' allowfullscreen></iframe>");
iframe.attr("id",framename);
iframe.attr("src",url);
dialogHeight = dialogHeight - 10;
$(iframe).css('height', dialogHeight);
$(iframe).css('width',width);
var iframeHolder = $('<div class="iframe-wrapper"
id="drg' + framename + '" />');
var iframeInside = $('<div class="iframe-inside" />');
var iframeTitle = '<div class="iframe-title">
<div class="title-line">' + title +
'</div><div class="iframe-tools"><a href="javascript:void(0)"' +
'class="iframe-min"> </a> ' +
'<a href="javascript:void(0)" class="iframe-restore disabled"></a>' +
' <a href="javascript:void(0)"class="iframe-max"></a>' +
'<a href="javascript:void(0)" class="iframe-close"></a> </div></div>';
iframeInside.prepend(iframeTitle);
$(iframe).appendTo(iframeInside);
iframeInside.appendTo(iframeHolder);
var footer = $('#divRootFooter', top.document);
if (footer.length>0) {
iframeHolder.appendTo(footer);
var drg = $(footer).find('#drg' + framename);
drg.draggable({
handle: $('#drg' + framename + ' .title-line')
});
$('#drg' + framename, window.parent.document).draggable
({handle:$('#drg' + framename + ' .title-line') });
}
else {
iframeHolder.appendTo('footer');
$('#drg' + framename).draggable({
handle:
$('#drg' + framename + ' .title-line')
});
}
}
function getFrameElement () {
if (window.parent == null)
return null;
var iframes = parent.document.getElementsByTagName('iframe');
for (var i = iframes.length; i-- > 0;) {
var iframe = iframes[i];
try
{
var idoc = 'contentDocument' in iframe ?
iframe.contentDocument : iframe.contentWindow.document;
}
catch (e) {
continue;
}
if (idoc === document)
return iframe;
}
return null;
}
Let's consider that we are using an action of ASP.NET MVC. From the project it's a very straightforward system to return the partial view. The URL will look like “/testsite/home/id”.
ASP Code
public TestWindowController:Controller
{
public ActionResult GetPartialView()
{
return PartialView("partialview");
}
}
Accessing parent-child IFrame
Using this type of modal, we will have to have a mechanism to call a parent window function from
the child window. Because of different DOMs, we have to handle this programmatically.
From parent page access Child page js methods
document.getElementById(‘iframeId').contentWindow.functionName(parameters…);
From IFrame page (child page) access parent page controls
function AccessParentPage(){
var url = parent.document.referrer;
var obj = parent.document;
$(obj).find('control name');
}
From IFrame page (child page) access parent page js methods
This is pretty simple. You just need to add the parent
keyword in the beginning to call methods in
the parent page.
Example
If validate()
was the method in the parent page, then simply
call parent.validate()
from the IFrame page.
From parent page access child page controls
var obj = document.getElementById('iframe id').contentWindow.document;
$(obj).find('control name').each(function () {
Summary
You’ve learned how to use IFrame as a modal window to avoid collision of the same element that comes over a single page.