Welcome to WebmasterWorld Guest from 54.196.244.45

Forum Moderators: open

Message Too Old, No Replies

Writing elements into an iframe after its redirection

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

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 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?
6:32 pm on Mar 19, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


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).
1:57 pm on Mar 20, 2014 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


Thank you very much! I really appreciate it! :)
2:13 pm on Mar 20, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


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.
7:08 am on May 31, 2014 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 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.