3

情况如下：

  1. 我有一个返回表单的网络服务。

  2. 然后，许多其他站点在 iFrame 元素中使用此表单。

  3. 我需要表单来“佩戴”托管站点的背景、颜色或换句话说 CSS（但如果这更容易，我会选择背景和徽标）。

我的网络服务和其他网站不在同一个域上。我可以完全控制我的网络服务，并且可以定义所有站点的一般要求。

处理这个问题的最佳方法是什么？

4

1 回答 1

1

有几种方法可以做到这一点：

1 - 将样式表作为参数传入 iframe：

传入 CSS 样式表作为 iframe 的 src 属性中的查询参数。这可能是最简单的方法，它使该样式表的所有者可以更好地控制表单在该人的站点上的外观。

<body>

<!-- This is the client's website -->

<!-- This is your form -->
<iframe src="http://example.com/form/abc/?css=http://example.com/file/formStyle.css" />

2 - 将颜色和徽标传入 iframe：

这与第一个示例中的基本思想相同，只​​是您没有引用外部样式表：

<iframe 
   src="http://example.com/form/abc/?color=#AAAAAA&logo=http://example.com/logo.png" />

3 - 使用 PostMessage：

另一种选择是使用 postMessage API。使用 postMessage，您可以跨域将消息从一个上下文传递到另一个上下文。因此，客户端页面可以将背景颜色传递给 iframe 页面，这也可以重用于传递其他类型的信息和数据。

框架代码：

// register to listen for postMessage events
window.addEventListener("message", changeBackground, false);  

// this is the callback handler to process the event
function changeBackground(event)  
{  

  // make sure the code you put on the client's site is secure. You are responsible
   // for making sure only YOU have cross domain access to his/her site.
    // NOTE: example.org:8080 is the client's site
  if (event.origin !== "http://example.org:8080")  
    return;  

  // event.data could contain "#AAAAAA" for instance
  document.body.style.backgroundColor = event.data;
    // do other stuff
  }
}

顶级客户页面： 

// pass the string "#AAAAAA" to the iframe page, where the changeBackground
  // function will change the color
   // targetOrigin is the URL of the client's site
document.getElementById("theIframe").contentWindow.postMessage("#AAAAAA", targetOrigin);

此解决方案仅适用于现代浏览器，包括 IE8、FF3.6+、Chrome 13+、Safari 5+ 等。有关HTML5 postMessage的更多信息，请参阅 Mozilla 开发者中心。

如何从查询字符串中提取 CSS 参数？

在 iframe 页面中使用gup 函数获取 CSS 参数的值：

function gup(name) {
 name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
 var regexS = "[\\?&]" + name + "=([^&#]*)";
 var regex = new RegExp(regexS);
 var results = regex.exec(window.location.href);
 if (results == null)
  return "";
 else
  return results[1];
}

之后，您可以使用它来创建链接 CSS 标记：

// get url parameter from iframe src:
var cssPath = gup("cssPath");  

// create link and append to head
var linkElem = document.createElement("link");
linkElem.setAttribute("href", cssPath);
linkElem.setAttribute("rel","stylesheet");
document.getElementsByTagName("head")[0].appendChild(link);

或者

var color = gup("color");

document.body.setAttribute("style","background-color:" + color);
于 2012-05-26T12:33:21.443 回答