使用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;