homepage Welcome to WebmasterWorld Guest from 54.166.122.65
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Writing elements into an iframe after its redirection
Rain_Lover



 
Msg#: 4654396 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4654396 posted 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



 
Msg#: 4654396 posted 1:57 pm on Mar 20, 2014 (gmt 0)

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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4654396 posted 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



 
Msg#: 4654396 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved