Home/ Questions/Q 7990903
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T13:08:24+00:00

Here is the situation: I have a webservice that returns a form. This form

  • 0

Here is the situation:

  1. I have a webservice that returns a form.

  2. This form is then used by many other sites in an iFrame element.

  3. I need the form to “wear” the hosting site’s background, color, or in other words CSS (but i will settle for background and logo if this is easier).

My webservice and the other sites are not on the same domain.
I have full control over my webservice and i can define general requirements for all sites.

What is the best way to handle this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are several ways to accomplish this:

    1 – Pass in a stylesheet as a parameter into the iframe:

    Pass in a CSS stylesheet as a query parameter in the src attribute of the iframe. This is perhaps the easiest method, and it gives the owner of that stylesheet more control over how the form looks on that person’s site.

    <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 – Pass in the color and logo into the iframe:

    This is the same basic idea as in the first example, except you’re not referencing an external stylesheet:

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

    3 – Use PostMessage:

    Another option is to use the postMessage API. With postMessage, you can pass a message from one context to another, across domains. Thus, the client page could pass the background color to the iframe page, and this could be reused to pass other types of information and data as well.

    Iframe code:

    // 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
  }
}

    Top Level Client Page: 

    // 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);

    This solution only works in modern browsers, including IE8, FF3.6+, Chrome 13+, Safari 5+, etc. See the Mozilla Developer Center for more information on HTML5 postMessage.

    How to pull the CSS parameter from the query string?

    Use the gup function in the iframe page to get the value of the CSS parameter:

    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];
}

    Afterwards, you can then use it to create a link CSS tag:

    // 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);
    • 0