Show modal dialog in IE with IFrame

Apr 27, 2016
JavaScript>IE>IFrame>Interesting>Cookbook
IE/IFrame/javascript/modal/returnValue

We had used modal dialog of IE, in one of our old projects. What we did there, opened one modal dialog, with one url to a external website. In the external page (not maintained by us), one variable returnValue was set to window with the intended value (one object actually), and we used to get the resultant from the return value of showModalDialog, as this returns the value present in window.returnValue of the modal.

Here is the bare minimum code of the markup creating the modal.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Show Modal Test</title>
</head>

<body>

  <div>
    <input id="name" disabled />
    <input type="button" id="button1" onclick="openWindows()" value="Enter Name" />
  </div>

  <script type="text/javascript">
    function openWindows () {
      // Get the return value set by the modal window
      var getval = window.showModalDialog('modal.html');
      window.document.getElementById('name').value = getval.data;
    }
  </script>

</body>

</html>

And this is the markup of the modal (maintained by third party). The returnValue property in the window object of modal, is returned by the showModalDialog method.

<!-- modal.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Modal Window</title>
</head>

<body>

  <div>
    <input id="inputName" />
    <button type="submit" id="btnReturnValues" onclick="ReturnValues()">Submit</button>
  </div>

  <script type="text/javascript">
    function ReturnValues() {
      var vReturnValue = document.getElementById('inputName').value;
      window.returnValue = {
          data: vReturnValue
      };
      window.close();
    }
  </script>
  
</body>

</html>

After some time, due to some sizing issue of the modal dialog, we used one intermediary HTML page as the content of the modal. And, in that page we navigated to the external link, via an IFrame, setting the dimention. So, we added the url of the container (where the IFrame resides) as the first parameter of the method showModalDialog and sending the url of the intended url as dialogArguments (refer to).

var getval = w.showModalDialog('container.html', 'modal.html', 'dialogWidth:960px; dialogHeight: 670px; resizable: yes');

And added the container page. Modifications were not required in the third party page.

<!-- container.html -->

<!DOCTYPE html>
<html>

<head>
  <title>Conatiner</title>
</head>

<body>
  <iframe onload="setStyle()" name="iframeExternalLink" id="iframeExternalLink"></iframe>

  <script>
    window.onload = function () {
      var url = window.dialogArguments;
      document.getElementById('iframeExternalLink').src = url;
    }

    // Explicitly setting the height of the IFrame. Even if the third-party page comes bogger, scroll bars will come
    function setStyle () {
      document.getElementById('iframeExternalLink').height = '670px';
      document.getElementById('iframeExternalLink').width = '960px';
    }
  </script>
</body>

</html>

That was working fine, till last week. After one patch (Current version: IE11-11.0.9600.18204, IE10-10.0.9200.17640), the procedure is not working as previous. If we examine closely, this should not work previously also. As from the external web page, the returnValue property is set in the window, that property is set theoretically to the window object of the IFrame itself. But somehow it was working.

As we are opening third party url, it’s a long procedure, to tell them to change in their code. So, we were searching for a solution, so that, third party code should not needed to be affected.

After some brainstorming, we thought that, in the onbeforeunload event (called before closing of a window), in the container.html, we can set the returnValue property in the window object of the page, where the IFrame resides.

window.onbeforeunload = function (e) {
  var win = window.frames['iframeExternalLink'];
  window.returnValue = win.returnValue;
}

This was working. But, that again didn’t work. As, the third party website is using Telerik, the library sets the onbeforeunload as it requires. So, our event handler is at all not fired.

What to do now?

We found our second approach. But this approach requires modification in the third party code. In the function, where the window.close is called, they need to call one method setReturnValue of parent, which in turn will set the returnValue in the parent (the modal window) or directly set the value of the property returnValue in window.parent.

<!-- In container.html -->

function setReturnValue (returnVal) {
  window.returnValue = returnVal;
}

and in the external web page: 

// In modal.html

function ReturnValues() {
  var vReturnValue = document.getElementById('inputName').value;
  
  // Call the method in parent to set the returnValue
  window.parent.setReturnValue( {
    data: vReturnValue
  });
  window.close();
}

or in short,

// In modal.html

window.parent.returnValue = {
  data: vReturnValue
};

This would solve the problem. Easy solution. Right?

Blog comments powered by Disqus