CODEWITHSUNDEEP
javascriptcssajaxiframe
Peter
Peter

Reputation: 115

Change content of iframe using JavaScript or CSS

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.

Upvotes: 1

Views: 5666

Answers (2)

Anand Shah
Anand Shah

Reputation: 633

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

Upvotes: 2

johnkavanagh
johnkavanagh

Reputation: 4674

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

Upvotes: 0

Related Questions