如何为其他网站创建嵌入代码

Posted 2023-03-13

【中文标题】如何为其他网站创建嵌入代码

【英文标题】：How to create embed code for other sites

【发布时间】：2012-12-15 10:44:58

【问题描述】：

我有一个工作门户服务，其他用户可以将其用于他们的网站和博客。他们从我的网站复制嵌入代码，将其粘贴到他们的网站并在他们的网页上显示工作板。如何创建这个嵌入代码任何人都可以帮助我。

这里是 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>

【问题讨论】：

这真的取决于您希望嵌入代码的外观。应该怎么看？

只需通过 iframe 提供您的嵌入。对 youtube 来说已经足够好了，对任何其他网站也应该足够好了。

【参考方案1】：

有许多方法可以实现您的目标。由于您没有明确说明您的需求，我只是提供一个简单的示例：

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

根据需要修改代码 在您的 html 中转义此代码 尽情享受您的超棒嵌入式小部件吧！

【讨论】：

我相信这是你的css的问题。你可以用 div 包裹这个脚本并修改 div 的位置。

嘿@user1939164，您的嵌入式小部件是否正确？如果这个回答解决了你的问题，请记得采纳哦：）

这个演示有问题吗？ jsbin.com/capesewati/edit?html,console,output 未捕获的类型错误：无法读取 null 的属性“appendChild”

你应该把这个sn-p的代码放在你文件的末尾。你把它放在最上面，所以代码不能得到“body”，它还没有生成。

【参考方案2】：

如何在 .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

创建嵌入脚本后简单易行的方法将此脚本粘贴到您要在之后的其他页面中显示的位置

(函数(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;如果（rs） if (rs != 'complete') if (rs != 'loaded') return;试试 frm = new FormBuilder(921,'MjEzNjkxMjU='); frm.initialize（选项）； frm.display(); catch (e) ; var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);)(document, 'script');

在您的 js 文件中创建这样的函数并创建 iFrame 并创建查询字符串，您可以在其中从数据库中获取表单。

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