Writing elements into an iframe after its redirection

Forum Moderators: open

Message Too Old, No Replies

Writing elements into an iframe after its redirection

Rain_Lover

5:12 pm on Mar 15, 2014 (gmt 0)

I know how to write into an iframe:

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

<head>
  <meta charset="UTF-8">
  <title>Writer</title>
  <style>
    textarea,
    iframe {
      display: block;
      width: 800px;
      height: 200px;
    }
  </style>
</head>

<body>
  <textarea id="ta" oninput="writeIt();"></textarea>
  <iframe id="frm"></iframe>
  <script>
    function writeIt() {
      var ta = document.getElementById('ta');
      var frm = document.getElementById('frm');
      var frmDoc = frm.contentDocument;
      frmDoc.open();
      frmDoc.write(ta.value);
      frmDoc.close();
    }
  </script>
</body>

</html>

[jsfiddle.net ]

There's a problem, though. Enter the following into the textarea:

<a href="http://www.example.com/">Example.com</a>

Now click on the link, and then get back to the textarea to continue writing. It doesn't work anymore due to the cross-origin restriction. Is there any way in this case to continue writing?

Fotiman

6:32 pm on Mar 19, 2014 (gmt 0)

Try something like this:


var ta = document.getElementById('ta'),
  frm = document.getElementById('frm');

function writeIt() {
  try {
    var frmDoc = frm.contentDocument;
    frmDoc.open();
    frmDoc.write(ta.value);
    frmDoc.close();
  }
  catch (e) {
    frm.src = "";
    setTimeout(writeIt, 80);
  }  
}

In other words, if it gets into a situation where it can't open the frmDoc (because of cross-origin), reset the frm.src to be blank, then try again in 80ms. Note, I added the setTimeout because when I tried to do this inline like this:


  catch (e) {
    frm.src = "";
    writeIt();
  }

It ended up killing my browser (I presume some sort of race condition between settng frm.src and accessing contentDocument). Might be worth investigating if you see any sort of browser hang issues (but I don't think you will).

Rain_Lover

1:57 pm on Mar 20, 2014 (gmt 0)

Thank you very much! I really appreciate it! :)

Fotiman

2:13 pm on Mar 20, 2014 (gmt 0)

Glad to help. :)
Note, I picked 80ms arbitrarily. So you may want to experiment some to see if there is a value that works optimally.

Rain_Lover

7:08 am on May 31, 2014 (gmt 0)

Note, I picked 80ms arbitrarily. So you may want to experiment some to see if there is a value that works optimally.

Any number seems to be working -- even 0!

By the way, I just tried it in Safari 7 through an emulator and it seems to throw an error in console although it works with no problem: the iframe redirects to Example.com and then comes back to the original origin when you start typing. It seems to be a bug in Safari.