个人中心
gpt4 book ai didi

javascript - 将 Zendesk Widget 嵌入到 Rails 应用程序中

转载 作者：行者123 更新时间：2023-12-02 13:44:46 31 4
gpt4 key购买 nike 

Rails 3.2

我正在尝试将 zendesk 小部件嵌入到我的 Rails 应用程序中。该指令要求嵌入代码，作为 head 部分的末尾。

这是脚本:

<!-- Start of Zendesk Widget script -->
<script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var o=this.createElement("script");n&&(this.domain=n),o.id="js-iframe-async",o.src=e,this.t=+new Date,this.zendeskHost=t,this.zEQueue=a,this.body.appendChild(o)},o.write('<body onload="document._l();">'),o.close()}("https://assets.zendesk.com/embeddable_framework/main.js","xxx.zendesk.com");
/*]]>*/</script>
<!-- End of Zendesk Widget script -->

我使用的是.slim，所以这是我在views/layout/application.html.slim中所做的

doctype html
html lang="en"
  head
    meta charset="utf-8"
    meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    - if Rails.env.production?
      = javascript_include_tag "analytics.js"
      title= content_for?(:title) ? yield(:title) : t('layout.site_name')
    - else
      title= request.path.gsub('/', ' ').humanize
    = csrf_meta_tags
    /! Le HTML5 shim, for IE6-8 support of HTML elements
    /[if lt IE 9]
      = javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"
    = stylesheet_link_tag "//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css", "application"
    = stylesheet_link_tag controller.controller_name if Installio::Application.assets.find_asset("#{controller.controller_name}.css")
    = javascript_include_tag "application", "//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"
    = javascript_include_tag controller.controller_name if Installio::Application.assets.find_asset("#{controller.controller_name}.js")
    = yield :css
    = yield :javascript

    link href="images/apple-touch-icon-144x144.png" rel="apple-touch-icon-precomposed" sizes="144x144"
    link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon-precomposed" sizes="114x114"
    link href="images/apple-touch-icon-72x72.png"   rel="apple-touch-icon-precomposed" sizes="72x72"
    link href="images/apple-touch-icon.png"         rel="apple-touch-icon-precomposed"
    link href="/favicon.ico"                        rel="shortcut icon"
    javascript:
      <!-- Start of Zendesk Widget script -->
      <script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var o=this.createElement("script");n&&(this.domain=n),o.id="js-iframe-async",o.src=e,this.t=+new Date,this.zendeskHost=t,this.zEQueue=a,this.body.appendChild(o)},o.write('<body onload="document._l();">'),o.close()}("https://assets.zendesk.com/embeddable_framework/main.js","xxx.zendesk.com");
      /*]]>*/</script>
      <!-- End of Zendesk Widget script -->
  body

JavaScript 应该在右下角创建一个图标。

当我查看页面 html 源代码时，我得到的是:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible" />
      <meta content="width=device-width, initial-scale=1.0" name="viewport" />
      <title> companies tickets</title>
      <meta content="authenticity_token" name="csrf-param" />
      <meta content="8SQUtDCkI0m2DEt+PmGETO4F8hqD60oXLWzOvkm395A=" name="csrf-token" />
      <!--Le HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script><![endif]-->
      <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
      <link href="/assets/application-92740c7868cf6da1a36b8824c3467f05.css" media="screen" rel="stylesheet" type="text/css" />
      <script src="/assets/application-4c835f73bc6c75e164ae8fa087f33966.js" type="text/javascript"></script>
      <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script><script src="/assets/tickets-0f5809fe7de8a6d1415fbbadf7d24e17.js" type="text/javascript"></script><script src="/assets/price_calculation-61272aba476e0c62104eac34b8ee22b1.js" type="text/javascript"></script><script src="/assets/ajax-table-d6d79fff4bfee3f320d115150c8bd3ca.js" type="text/javascript"></script><script src="/assets/context-form-a8ccf9d4d39039858ccb4950aa97dac5.js" type="text/javascript"></script>
      <link href="images/apple-touch-icon-144x144.png" rel="apple-touch-icon-precomposed" sizes="144x144" />
      <link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
      <link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
      <link href="images/apple-touch-icon.png" rel="apple-touch-icon-precomposed" />
      <link href="/favicon.ico" rel="shortcut icon" />
      <script type="text/javascript"><!-- Start of Zendesk Widget script -->
         <script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var o=this.createElement("script");n&&(this.domain=n),o.id="js-iframe-async",o.src=e,this.t=+new Date,this.zendeskHost=t,this.zEQueue=a,this.body.appendChild(o)},o.write('<body onload="document._l();">'),o.close()}("https://assets.zendesk.com/embeddable_framework/main.js","xxx.zendesk.com");
         /*]]>*/
      </script>
      <!-- End of Zendesk Widget script --></script>
   </head>
   <body>
       ....................
   </body>
</html>

但是，我没有在页面右下角看到 Zendesk 图标。有任何想法吗？

最佳答案

该问题可能与 <script> 有关标签被渲染两次？但是，我之前在 Rails 应用程序中安装了这个脚本，为了获得更干净的解决方案，我做了以下操作:

1) 为 Zendesk 脚本创建一个新的 JS 文件，在模板中嵌入这么长的代码是很难看的。我通常把这种脚本放在 vendor/assets/javascripts/ 中，所以你最终应该得到类似 vendor/assets/javascripts/zendesk.js 的东西。请注意，您不应包含 <script>这个文件中的tags，只是从/*<![CDATA开始的JS代码

2) 指示 Rails 预编译此文件，并将此行添加到 config/initializers/assets.rb :Rails.application.config.assets.precompile += %w( zendesk.js )

3) 在您的应用程序布局中添加行 = javascript_include_tag 'zendesk'

测试其正常工作后，您可能不希望包含开发环境的脚本，因为它会减慢您的本地请求。您应该采取与 analics.js 相同的方法

关于javascript - 将 Zendesk Widget 嵌入到 Rails 应用程序中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41497587/

31 4 0
文章推荐： javascript - 检索嵌套对象 JavaScript
文章推荐： javascript - 将字符串从 HTML 发送到 jQuery 时，jQuery 删除撇号后的字符
文章推荐： javascript - 对象检查不适用于所有浏览器
文章推荐： javascript - Angular ng-repeat 无法正确渲染数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com