使用 JavaScript 或 CSS 更改 iframe 的內容

Question

我在網站上有 iframe 頁面。 iframe 域和我的​​站點域不同。 在$(document).ready上的 iframe 中執行 ajax 請求。 此 ajax 請求的響應插入到 div 中。 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 currency 我知道同源策略不允許使用 javascript 更改內容。 有沒有辦法使用css做到這一點？ 或任何其他方式？

謝謝。

Answer 1

你不能使用 css 或 js 來做到這一點。

jQuery/JavaScript：訪問 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 替換非常輕松地切換文本：

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