从内部赋予iframe属性

Giving iframe properties from inside

本文关键字：iframe 属性 内部      更新时间：2023-09-26

因此，我目前正在开发一个应用程序，该应用程序在其自己的iframe内运行在客户页面的顶部。

Application在主干中工作，除了iframe的初始化之外，其他一切都在iframe中完成。初始化发生在一个小的javascript片段，客户端将复制到他们的页脚。

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

是否有更好的方式来样式的iframe比目前的方式做它?

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

内联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>

你可以单独提供你的css给客户端。如果这不是一个选项，那么您需要按照您现在所做的方式来做(从iframe中注入父样式)。然而，这似乎不是一个好主意，除非你的css规则非常独特。

有很多方法，但有可能没有一个是适用的:

  1. 请求客户端为iframe设置样式(内联或css)
  2. 将框架内容发布到主站的同一域，并检查父框架是否可以通过javascript访问
  3. 请求客户端启用报头"X-Frame-Options"。也许是像"ALLOW-FROM sameddomain, www.youriframedomain.com"这样的东西。它似乎被弃用了，请检查Content-Security-Policy。
  4. 通过script标签嵌入
  5. 检查窗口。postMessage:无论如何，它需要一个额外的脚本在主网站监听消息(它可能是css文本本身)从iframe和应用新的样式

您应该能够使用window.frameElement来引用您的页面嵌入的iframe元素。有了这个引用，您应该能够修改style属性来改变框架的呈现方式。

相关文章：