web-dev-qa-db-ja.com

他のサイトの埋め込みコードを作成する方法

私は他のユーザーが自分のサイトやブログに使用できる求人ポータルのサービスを持っています。彼らは私のサイトから埋め込みコードをコピーし、それを彼らのサイトに貼り付け、彼らのウェブページに求人掲示板を表示します。この埋め込みコードを作成する方法を教えてください。

これはmonster.comパブリッシャーの例 website です。

[サンプルコードを取得]ボタンをクリックします。

<div id="MonsterJobSearchResultPlaceHolderIy8AAA_e_e" class="xmns_distroph"></div>
<script type="text/javascript">
(function() {
  var oScript = document.createElement('script');
  oScript.type = 'text/javascript';
  oScript.async = true;
  oScript.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'publisher.monster.com/Services/WidgetHandler.ashx?WidgetID=EAAQgDMlA5vzabXFzuv86ZpLpA--&Verb=Initialize';
  var oParent = document.getElementsByTagName('script')[0];
  oParent.parentNode.insertBefore(oScript, oParent);
})();
</script>
<a id="monsterBrowseLinkIy8AAA_e_e" class="monsterBrowseLink fnt4" href="http://jobsearch.monster.com/browse/">View More Job Search Results</a>
javascripthtmlembed
18
Nand Lal

多数目標を達成する方法があります。あなたがあなたの必要性を明確に説明しなかったので、私は単純な例を提供します：

<script type='text/javascript' charset='utf-8'>     
   var iframe = document.createElement('iframe');       
   document.body.appendChild(iframe);

   iframe.src = 'URL OF CONTENT YOU WANT TO PROVIDE';       
   iframe.width = 'THE WIDTH YOU WANT';
   iframe.height = 'THE HEIGHT YOU WANT';
</script>
  1. 必要に応じてコードを変更します
  2. あなたのhtmlでこのコードをエスケープする
  3. あなたの素晴らしい埋め込みウィジェットを楽しんでください！
21
Brian

.csでJavaScriptを使用して埋め込みを作成する方法

注：localhost：3197/website/js/embed/form.js '; // jsパスを与える

FormBuilder（921、 'MjEzNjkxMjU ='）;このメソッドでは、最初のパラメーターでフォームの高さを指定し、次にパラメーター名またはIDを指定します。そこにIDはエンコードされたフォーマットです

StringBuilder sb = new StringBuilder();
    sb.Append("<script type='text/javascript'>");
    sb.Append("(function(d, t) { var s = d.createElement(t), options = {");
    sb.Append("'async':true };");
    sb.Append("s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'localhost:3197/website/js/embed/form.js';");
    sb.Append("s.onload = s.onreadystatechange = function() {");
    sb.Append("var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;");
    sb.Append("try { frm = new FormBuilder("+Form Height+",'"+FormId+"');frm.initialize(options);frm.display(); }");
    sb.Append("catch (e) {}};");
    sb.Append("var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);");
    sb.Append("})(document, 'script');</script>");

    txtjavascript.Value = sb.ToString();  // text box name

埋め込みスクリプトを作成した後、シンプルで簡単な方法でこのスクリプトを貼り付け、その後、他のページに表示したい場所に貼り付けます。

（function（d、t）{var s = d.createElement（t）、options = {'async'：true}; s.src =（ 'https：' == d.location.protocol？ 'https：// '：' http：// '）+' localhost：3197/website/js/embed/form.js '; s.onload = s.onreadystatechange = function（）{var rs = this.readyState; if（rs）if （rs！= 'complete'）if（rs！= 'loaded'）return; try {frm = new FormBuilder（921、 'MjEzNjkxMjU ='）; frm.initialize（options）; frm.display（）;} catch（ e）{}}; var scr = d.getElementsByTagName（t）[0]、par = scr.parentNode; par.insertBefore（s、scr）;}）（document、 'script'）;

その後、jsファイルで次のようにfuctionを作成し、データベースからフォームをフェッチするiFrameおよびcreate querystringを作成します。

function FormBuilder(fHeight, formid) {

    var iframe = document.createElement('iframe');
    iframe.style = "height:" + fHeight + "px; width:100%; border:none";
    iframe.setAttribute('allowTransparency', true);
    iframe.frameBorder = "0";
    iframe.scrolling = "no";
    iframe.src = "http://localhost:3197/form/show-form?id="+ formid;
    document.body.appendChild(iframe);
}
1
gaurav gupta