Question

所以我目前正在开发一个在自己的iframe中运行在客户页面之上的应用程序。

应用程序在骨干网中工作，除了iframe的初始化之外的所有其他内容都在iframe内部完成。初始化使用一个小的javascript片段，客户端将复制到它们的页脚。

我目前遇到的问题是我必须向父网站注入一个CSS文件，以便在呈现iframe时正确设置其样式，我真的不认为我应该篡改客户页面，因为CSS可能会有一些冲突。

有没有更好的方法来设置iframe的样式而不是当前的方式呢？

Answer 1

我认为你有两种不同的选择;

内联iframe样式
为您的客户端提供一个预先设置好的iframe嵌入，就像这样

<iframe src="yoururl.com/client" 
        frameborder="0" 
        style="border: 0; width: 100%; height: 600px;">
</iframe>

嵌入脚本代码
创建一个您提供给客户端的小脚本标记（您主持）。在脚本内部，您可以动态创建iframe dom元素以及可能需要的其他外部css文件

托管一个JS文件，例如 // yoururl.com/iframe.js

var iframe = document.createElement("iframe");
iframe.setAttribute("src","http://yoururl.com/client");
document.write("<div id='mycontainer'></div>");
document.getElementById("mycontainer").appendChild(iframe);

然后，您可以将此信息提供给您的客户，以便将他们希望iframe显示的页面放入其中。

<script src="//yoururl.com/iframe.js" type="text/javascript"></script>

Answer 2

有许多方法，但可能没有人适用：

要求客户设置iframe样式（内联或使用css）
在主网站的同一域上发布iframed内容，并检查父框架是否可通过javascript访问
要求客户启用标题“X-Frame-Options”。也许有点像“允许来自SAMEDOMAIN，www.youriframedomain.com ”。它似乎已被弃用，请检查 Content-Security-Policy 。
通过脚本标记
检查window.postMessage：无论如何，它还要求主网站中的其他脚本从iframe中侦听消息（可能是css文本本身）并应用新样式

Answer 3

您可以单独向客户提供您的CSS。如果这不是一个选项，那么你需要按照现在的方式进行（从iframe中注入父样式）。但是，这似乎不是一个好主意，除非你的css规则非常独特。

Answer 4

您应该可以使用window.frameElement来引用嵌入页面的iframe元素。使用该引用，您应该能够修改样式属性以更改框架的呈现方式。

从内部给予iframe属性

4 个答案: