使用jQuery在iframe內容上更改CSS-js教程-PHP中文網

Use jQuery to Change CSS on iFrame Content

使用jQuery在iframe內容上更改CSS

在這篇文章中，我還提供了一些試圖更改其他域上iframed內容CS的失敗嘗試的文檔。還有關如何在同一域上更改iframe中的CSS的一些信息，據我所知，如果沒有代理通行證或類似的話，這是無法完成的。

跨域工作

它的工作原理：比較URL >結果 >原因 http://www.example.com/dir/page.html 成功相同的協議和主機 http://www.example.com/dir2/other.html 成功相同的協議和主機 http://www.example.com:81/dir/other.html 失敗相同的協議和主機，但端口不同 https://www.example.com/dir/other.html 失敗不同的協議 http://en.example.com/dir/other.html 失敗不同的主機 http://example.com/dir/other.html 失敗不同的主機（需要確切匹配） http://v2.www.example.com/dir/other.html 失敗不同的主機（需要確切匹配）

>插入iframe：


<span>Ways to to change CSS in an iframe
</span><span>Some of these work, and some don't but i've included both for you to ponder amd make up your own decisions.
</span>
<span><span>This</span> method didn't work for me.
</span><span>[js]
</span><span>var text = 'hi';
</span><span>var content = "" + text + "";
</span>
<span>var iframe = document.createElement("iframe");
</span>iframe<span>.src = ' document.body.appendChild(iframe);
</span>
<span>var doc = iframe.document;
</span><span>if(iframe.contentDocument)
</span>doc <span>= iframe.contentDocument; // For NS6
</span><span>else if(iframe.contentWindow)
</span>doc <span>= iframe.contentWindow.document; // For IE5.5 and IE6
</span><span>// Put the content in the iframe
</span>doc<span>.open();
</span>doc<span>.writeln(content);
</span>doc<span>.close();
</span>
doc<span>.getElementsByTagName("body").style.backgroundColor = 'red';</span>

登入後複製

這種方法對我不起作用。

<span>var cssLink = document.createElement("link")
</span>cssLink<span>.href = "style.css";
</span>cssLink <span>.rel = "stylesheet";
</span>cssLink <span>.type = "text/css";
</span>frames<span>['frame1'].document.body.appendChild(cssLink);</span>

登入後複製

這種方法對我有用。

<span>var frm = frames['frame'].document;
</span><span>var otherhead = frm.getElementsByTagName("head")[0];
</span><span>var link = frm.createElement("link");
</span>link<span>.setAttribute("rel", "stylesheet");
</span>link<span>.setAttribute("type", "text/css");
</span>link<span>.setAttribute("href", "style.css");
</span>otherhead<span>.appendChild(link);</span>

登入後複製

這種方法對我有用。

登入後複製

var iframe = top.frames [name] .document; var css =” ’

經常詢問有關在iframe內容中更改CSS的問題

>為什麼我不能從另一個域中更改iframe的CSS？

這是由於“相同原始策略”造成的，這是Web安全的關鍵方面。它可以防止一個頁面上的腳本訪問或修改另一個頁面的屬性。該策略的實施是為了防止潛在的惡意腳本在另一個網頁上訪問敏感數據。

>是否有任何解決方法可以修改跨域iframe的CSS？

不幸的是，由於上面提到的安全原因，沒有直接修改交叉域iframe iframe iframe iframe的CSS。但是，如果您可以控制iframe的源頁面，則可以在此處添加一個腳本以從父頁面接收消息並進行必要的更改。

>

>如果是來自同一域中的iframe的CSS，我該如何更改iframe的css？

>
>

如果iframe是同一域中，您可以直接訪問其內容並直接訪問其內容並使用cssssssssssssssssssssssssssssssssss。這是一個簡單的示例： $（“＃myiframe”）。 cottents（）。查找（“ body”）。 css（“ background-color”，“ red”）;>>這將將iframe身體的背景顏色更改為紅色。

>我可以使用javascript而不是jquery更改iframe的CSS？以下是您可以做到的：

var iframe = document.getElementById（'myiframe'）;

var iframedoc = iframe.contentDocument || iframe.contentwindow.document;
iframedoc.body.style.style.backgroundColor =“ red”;
>這也會將iframe身體的背景色更改為紅色。

>。 iframe可能來自另一個域，在這種情況下，由於相同的原始策略，您無法修改其CSS。或者，當您嘗試更改CSS時，IFRAME的內容可能未被充分加載。 To ensure the iFrame is fully loaded, you can use the load event.

Can I use the postMessage method to change the CSS of a cross-domain iFrame?

Yes, if you have control over the iFrame’s source page, you can use the postMessage method to send messages from the parent page to the iFrame, and add a listener in the iFrame’s page to receive the messages and make the necessary更改。

>我如何確保在iframe滿載滿載後應用我的CSS更改？

>您可以使用加載事件來確保在嘗試更改其CSS之前在iframe之前滿載。您可以使用jQuery：

$（“＃myiframe”）。 on（“ load”，function（）{

$（this）.contents（）。

>如果是pdf？

不，我可以更改iframe內容的CSS，不，您無法更改PDF文件的CSS。 CSS是一種樣式表語言，用於描述用HTML或XML編寫的文檔的外觀和格式。 PDF文件具有自己的格式，無法使用CSS進行樣式。

我可以使用CSS更改IFRAME的大小嗎？您可以做到這一點：
iframe {
寬度：500px;

高度：300px;