如何在不直接存取的情況下設定跨域 iFrame 內容的樣式？

修改跨域iFrame 內容樣式

問題：

如何更改跨域iFrame 內容的樣式來自不同域的iFrame，假設您無法存取iFrame 的來源域來放置任何檔案或樣式表？

答案：

由於跨域限制，使用 JavaScript 或其他傳統方法直接修改 iFrame 內容的樣式是不可能的。

解決方案：

唯一可行的方法是代理 iFrame透過您自己的伺服器取得內容。以下是實現此目的的方法：

1. 建立代理程式腳本：

   • 在您的伺服器上設定一個代理程式腳本來取得來自遠端網域的iFrame 內容。
   • 使用 PHP、Node.js 或 Python 等工具編寫代理程式腳本。

2. 修改 HTML 內容：

   • 在代理腳本中攔截來自遠端域的回應。
   • 解析 HTML 內容並修改 iFrame 內容的 CSS 樣式。例如，您可以將背景顏色變更為黑色，將文字顏色變更為白色。

3. 傳回修改後的內容：

   • 將修改後的 HTML 內容當作回應傳回給客戶端。

代理腳本範例：

<?php // Fetch content from remote domain
$content = file_get_contents('https://crossdomain.example.com');

// Parse HTML and modify style
$doc = new DOMDocument();
$doc->loadHTML($content);
$styles = $doc->getElementsByTagName('style');
$styles[0]->textContent .= "body { background-color: black; color: white; }";

// Return modified content
echo $doc->saveHTML();
?>

4. 修改iFrame 的'src' 屬性以指向您的代理腳本而不是原始的跨域URL。
   透過使用這種代理技術，您可以有效地改變跨域 iFrame 內容的樣式，而不會違反跨域安全性限制。

以上是如何在不直接存取的情況下設定跨域 iFrame 內容的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！