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页面，这也可以重复使用以传递其他类型的信息和数据。

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 function获取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);

OR

var color = gup("color");

document.body.setAttribute("style","background-color:" + color);

我的Iframe内容如何继承托管域CSS？

1 个答案:

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

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

3 - 使用PostMessage ：

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