javascript - 从内部赋予 iframe 属性

Question

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

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

我目前遇到的问题是，我必须向父站点注入(inject)一个 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>