3

状況は次のとおりです。

  1. フォームを返す Web サービスがあります。

  2. このフォームは、iFrame 要素内の他の多くのサイトで使用されます。

  3. ホスティング サイトの背景、色、つまり CSS を「着用」するフォームが必要です (ただし、これが簡単な場合は、背景とロゴで解決します)。

私の Web サービスと他のサイトが同じドメインにありません。Web サービスを完全に制御でき、すべてのサイトの一般的な要件を定義できます。

これを処理する最善の方法は何ですか?

4

1 に答える 1

1

これを実現するには、いくつかの方法があります。

1 - スタイルシートをパラメーターとして iframe に渡します。

iframe の src 属性で、CSS スタイルシートをクエリ パラメータとして渡します。これはおそらく最も簡単な方法であり、そのスタイルシートの所有者は、その人のサイトでフォームがどのように表示されるかをより詳細に制御できます。

<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 を使用します。

もう 1 つのオプションは、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 Developer Center を参照してください。

クエリ文字列から 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 に答える