Change content of iframe using JavaScript or CSS

Question

I have page on site with iframe. iframe domain and my site domain are different. In iframe on $(document).ready executes ajax request. Response of this ajax request inserted into div. Ajax response looks like:

<ul>
    <li><a href="example.com/page-1">5 currency</a></li>
    <li><a href="example.com/page-2">10 currency</a></li>
    <li><a href="example.com/page-3">some other text</a></li>
    <li><a href="example.com/page-4">5 currency</a></li>
    <li><a href="example.com/page-3">some other text 2</a></li>
    ....
    <li><a href="example.com/page-n">54 currency</a></li>
</ul>

I need to replace word currency with currency2. I know that Same Origin Policy doesn't allow to change content using javascript. Any way to do this using css? or any other way?

Thanks.

Community · Accepted Answer · 2017-05-23 11:59:31Z

2

you can not do it using css or js.

jQuery/JavaScript: accessing contents of an iframe

the only way is to change ajax response. if you can alter the $(document).ready call of iframe only then you can change ajax contents by following code

$.ajax({
 success: function(resp){
 resp.replace(/currency/g,'currency2');
}
})

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered May 23, 2013 at 12:40

Anand Shah

6337 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Peter Over a year ago

Page in iframe call ajax request - I can not reach it.

Anand Shah Over a year ago

I guess then you can't do it on client side. you can do it on server by loading document same as browser does & then by parsing it & extracting required things from that.

Peter Over a year ago

Well, iframe provider accept to add my js-code and resp.replace(/currency/g,'currency2'); is working. Thanks everyone for your help.

johnkavanagh · Accepted Answer · 2013-05-23 12:39:44Z

0

If you don't have any access to the markup itself that you're displaying within your iFrame, I don't believe there's any way of doing this I'm afraid. As you've already identified: security policies won't allow it (and even if you found a workaround, it wouldn't likely work cross-browser).

CSS also wouldn't really be an option here since it's more dsplay-based, unless you can find a way to use the :after pseudo class to inject the '2'.

If you do have control of the page where the AJAX request is being made, you can switch out the text very easily using jQuery replace on the AJAX response (or similar):

ajaxResponse.replace('currency', 'currency2')

answered May 23, 2013 at 12:39

johnkavanagh

4,6842 gold badges27 silver badges37 bronze badges

Collectives™ on Stack Overflow

Change content of iframe using JavaScript or CSS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related