Load and run JS from Ajax response in Iframe

Question

How am I able to load and run the ajax response to an iframe, note that the response (see below as an example) I wish to get loaded will run a javascript code. Please see below my attempt which is failing.

Code:

$.ajax({
    type: "post",
    url: url,
    data: data,
    dataType: 'text',
    success: function(responseData,textStatus, xhr)
    {
        var test = document.forms["myform"]["checkbox-email"].value;
        if (test == "on" )
        {                               
            console.log(responseData);
            var iframe = document.createElement("iframe");
            iframe.open(); 
            iframe.write(responseData);
            iframe.close();

        }

        else
        {
            //.....                         
        }



    },
    error: function (jqXHR, exception, error) 
    {
         var msg = '';
        if (jqXHR.status === 0) {
            msg = 'Not connect.\n Verify Network.';
        } else if (jqXHR.status == 404) {
            msg = 'Requested page not found. [404]';
        } else if (jqXHR.status == 500) {
            msg = 'Internal Server Error [500].';
        } else if (exception === 'parsererror') {
            msg = 'Requested JSON parse failed.';
        } else if (exception === 'timeout') {
            msg = 'Time out error.';
        } else if (exception === 'abort') {
            msg = 'Ajax request aborted.';
        } else {
            msg = 'Uncaught Error.\n' + jqXHR.responseText;
        }
        console.log(msg);

        $('#status').empty();
        $('#status').show();
         $("#status").attr("class", "error");
        $('#status').html("▼ " + msg).addClass('error');                             
        var div = document.getElementById('status');
        div.innerHTML += " ▼";
        div.innerHTML += jqXHR.responseText;                
        //console.log(jqXHR.responseText);

    } 

})

Code Error:

Object doesn't support property or method 'write'

Response to be loaded in an iframe:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" href="/js/jquery.mobile-1.4.5.min.css">
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">

 //jQuery.support.cors = true; 
 var attach3 = 'C:\\\\Users\\\\rihanio\\\\Dropbox\\\\Projects\\\\Python_code\\\\work\\\\gateway\\\\%s\\\\%s';
 //var attach3 = 'test'
 function sendEmail(){
   try{
      var theApp = new ActiveXObject("Outlook.Application");
      var objNS = theApp.GetNameSpace('MAPI');
      var theMailItem = theApp.CreateItem(0); // value 0 = MailItem

      theMailItem.to = ('[email protected]');
      theMailItem.Subject = ('%s');
      theMailItem.Body = ('%s');
      theMailItem.Attachments.Add(attach3);
      theMailItem.display();

      //Show the mail before sending for review purpose
    //You can directly use the theMailItem.send() function
    //if you do not want to show the message.

  }
  catch (err) {
     alert(err.message);
  } 
}

 $(document).ready(function($) {sendEmail(); });
 </script>

Darin Dimitrov · Accepted Answer · 2018-04-10 04:55:49Z

3

You could try writing to the contentWindow of the iframe:

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(responseData);
iframe.contentWindow.document.close();

Alternatively, you could try setting the src property of the iframe using text/html mime type:

var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(responseData);
document.body.appendChild(iframe);

Also notice that you should insert the iframe somewhere in the DOM (the document.body in my example) for this to appear.

edited Apr 10, 2018 at 4:55

answered Apr 10, 2018 at 4:34

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ossama Over a year ago

I get the following error for the first example: Unable to get property 'document' of undefined or null reference. as for the second one no errors however the js does not run

Darin Dimitrov Over a year ago

For the first example, could you try adding the iframe to the DOM before writing to the contentWindow? I have amended my answer to reflect this.

Darin Dimitrov Over a year ago

You could also try setting the width and height style properties of the iframe to ensure that it will be visible: iframe.style="width: 500px;height:500px;";

Ossama Over a year ago

getting somewhere now, i get this error $(document).ready(function($) {sendEmail(); }); any idea how to get passed it

Darin Dimitrov Over a year ago

Not sure what error you are referring to. What you have shown is some javascript code.

|

Collectives™ on Stack Overflow

Load and run JS from Ajax response in Iframe

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related