使用javascript或css更改iframe的内容

Question

我有网站上的页面与iframe。iframe域和我的站点域不同。在$(document).ready上的iframe执行ajax请求。插入到div中的此ajax请求的响应。Ajax响应如下所示：

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

我需要用currency2替换word currency。我知道同源策略不允许使用javascript更改内容。有没有办法用css做到这一点呢？或者任何其他方式？

谢谢。

Answer 1

您不能使用css或js来完成此任务。

jQuery/JavaScript: accessing contents of an iframe

唯一的方法是更改ajax响应。如果您只能更改iframe的$(document).ready调用，则可以通过以下代码更改ajax内容

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

Answer 2

如果您无法访问在iFrame中显示的标记本身，恐怕没有任何方法可以做到这一点。正如您已经确定的:安全策略不允许这样做(即使您找到了解决方法，它也不太可能跨浏览器工作)。

CSS在这里也不是一个真正的选择，因为它更基于dsplay，除非你能找到一种方法来使用:after伪类来注入'2‘。

如果您确实可以控制发出AJAX请求的页面，那么可以在AJAX响应(或类似内容)上使用jQuery replace非常容易地切换出文本：

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