Jump to content

Inserting A Stylesheet Into An Iframe

Recommended Posts

I'm using WYMeditor (http://www.wymeditor.org) on a website I'm building. The way the editor works is by inserting an iframe into the page. Unfortunately, that means that there are no styles applied to the content of the iframe. Consequently, I want to insert a stylesheet into the iframe to make it look like what it will when the edit is saved. Here's how I went about it:

$('#edit').wymeditor() // initialize wymeditor // add styles to iframe var iframe = $('iframe').first(),style = document.createElement('link') style.type = 'text/css'style.rel = 'stylesheet'style.href = '/styles/styles.css' iframe.contentWindow.document.body.appendChild(style)

This works when I enter the "add styles to iframe" section from the console. But when I put them into a script on the page, it doesn't work anymore. I did some debugging to see why, and it is because the iframe is not loaded yet ("undefined"). If I run the function 1 second after the WYMeditor is initialized, then it adds the stylesheet successfully. But there must be a better solution than that, though. Any ideas?

Share this post

Link to post
Share on other sites

Thanks, that link helped and I think I'll be able to figure it out. Sometimes working with third-party code drives me nuts. Other than very simple, well-documented APIs, this reminded me how much I really dislike working with third-party code.

Edited by Fmdpa

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...