Replace in iframe with jquery?

I have an iframe on my website loading content. Now there is a span in it:

<span class="readmore">read</span>

How can I add after read, more?

I tried adding this to my css but it ain’t working:

.readmore:after { content: ' more'; }

Does the iframe page have that CSS? Not the parent page?

Is the content coming from the same domain?

I am gonna be string with you I wanna replace Facebook likes counter value with other blush:

As far as the browser is concerned, an iframe is a new window. For security purposes you can’t affect one window with scripts from another window. Same for styles. Unless you have access to the page code loaded in the iframe, there is nothing you can do to modify its content.

1 Like

It doesn’t matter if it’s from the same domain or not. An iframe is technically a different browser window. Scripts and styles don’t work across different windows for security purposes.

I may be missing something here, but why not simply remove the <iframe> ?

You naughty lad (or lass) :hear_no_evil: :see_no_evil: :speak_no_evil:

The way to do what you want is to actually make your own custom button instead of using the scripts from Facebook. Details on how to do that are at

I would take a guess though, based on the question, that your programming level is not up to the task - and it does require a good deal of work.

Guys thanks yo all but that sounds too complex thanks big time.

Its no use in this case but if the iframe is on the same domain you can modify the contents quite easily.

If it is cross domain you can use postMessage to communicate between the two but of course you do need access to both pages.

I concede the point about same domain. Javascript is not one of my strongest point so I was not aware of that option. Still, as a rule of thumb, it’s safe to assume you are not able to touch content of an iframe. The exception only serves to enforce the rule.

Yes if the iframe doesn’t belong to you and you don’t have access to modify the source code in both pages then you can’t change anything.

Me neither :smile:

There is a nice little video on Nettuts to show how easy it can be to modify a same domain iframe.

It is the domain that makes the difference - not the window.

About 15 years ago I wrote an example of how you could create a shopping cart using only JavaScript right up to the point of submitting the order - it used frames with one frame always there so that the script attached to that frame could hold the order info as the other frame changed to display the different products.

Totally impractical as a real shopping cart but perfect proof that Netscape 4 and IE4 (and all browsers before and since that support JavaScript) can quite happily pass information between separate web pages on the same domain.

It was always the cross domain situation that was the problem prior to the introduction of postMessage (which is why postMessage was introduced). So now even cross domain can work provided both domains grant permission by including the necessary code on their site.

When JavaScript can access the other page it can pass CSS information across so that too has the same limitations.

Indeed and I conceded the point above. The large majority of cases though will be those where this sort of communication is not possible.

I don’t know why you have that idea. A growing number of sites are configured to not allow their pages to display as part of someone else’s page so most of the cases where the page will display at all will be because the page is intended to be displayed that way - in which case if JavaScript communication is appropriate it will have implemented its half of the communications.

I mean that most of the practical cases where iframes appear in pages will be from social media plugins, adverts or other similar sources, where the author of the main page has no control or access to what is displayed inside. After all, that is what this thread started for. The discussion just escalated and deviated from there.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.