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.

score 2 · Accepted Answer · edited May 23 '17 at 11:59

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 '17 at 11:59

Community

1
1

answered May 23 '13 at 12:40

Anand Shah

611
7
14

Page in iframe call ajax request - I can not reach it. – Peter May 23 '13 at 12:55
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. – Anand Shah May 23 '13 at 12:57
Well, iframe provider accept to add my js-code and `resp.replace(/currency/g,'currency2');` is working. Thanks everyone for your help. – Peter May 27 '13 at 07:07

score 0 · Answer 2 · answered May 23 '13 at 12:39

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')

Change content of iframe using JavaScript or CSS

2 Answers2