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.

Answer 1

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

Answer 2

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