使用 Rails 顺利嵌入 JS 小部件：分步指南-js教程-PHP中文网

Embed JS Widgets Smoothly with Rails: A Step-by-Step Guide

创建可嵌入客户端网站的自定义 JavaScript 小部件是扩展 Ruby on Rails 应用程序范围的有效方法。无论是聊天框、分析跟踪器还是任何其他交互元素，自定义小部件都可以让您直接向用户提供功能。让我们逐步了解构建安全、可嵌入小部件的步骤并介绍最佳实践。

第 1 步：设置

创建一个新的 Rails 端点：该端点将为您的小部件提供 JavaScript 代码。通常，这可能是 WidgetsController 中的一个操作：

# app/controllers/widgets_controller.rb
class WidgetsController < ApplicationController
  def show
    # Your widget code here
  end
end

登录后复制

配置路线：设置路线以使小部件可访问。

# config/routes.rb
Rails.application.routes.draw do
  get '/widget.js', to: 'widgets#show', as: :widget
end

登录后复制

从控制器提供 JavaScript：在 Rails 中，您可以通过设置适当的内容类型来使用 JavaScript 进行响应。

# app/controllers/widgets_controller.rb
class WidgetsController < ApplicationController
  def show
    response.headers['Content-Type'] = 'application/javascript'
    render layout: false
  end
end

登录后复制

为您的小部件编写 JavaScript 代码：小部件脚本通常包含在客户端页面上呈现自定义 HTML 元素或 iframe 的逻辑。

// app/views/widgets/show.js.erb
(function() {
  const widgetDiv = document.createElement('div');
  widgetDiv.id = 'custom-widget';
  widgetDiv.innerHTML = "<p>This is your custom widget content!</p>";
  document.body.appendChild(widgetDiv);
})();

登录后复制

第 2 步：为客户创建嵌入代码

要允许客户嵌入您的小部件，请提供一个 JavaScript 片段，他们可以将其复制并粘贴到 HTML 中：

<!-- Client Embeddable Code -->
<script type="text/javascript">
  (function() {
    const script = document.createElement('script');
    script.src = "https://yourapp.com/widget.js";
    script.async = true;
    document.head.appendChild(script);
  })();
</script>

登录后复制

第 3 步：将您的小部件嵌入到 Iframe 中（可选）

考虑将小部件内容嵌入到 iframe 中，以更好地隔离和控制样式。这种方法使小部件的样式和行为与客户端站点分开。

更新 JavaScript 代码以为小部件创建 iframe：

// app/views/widgets/show.js.erb
(function() {
  const iframe = document.createElement('iframe');
  iframe.src = "<%= widget_content_url %>";
  iframe.style.width = "300px";
  iframe.style.height = "200px";
  document.body.appendChild(iframe);
})();

登录后复制

为小部件内容定义新的路由和视图：

# config/routes.rb
Rails.application.routes.draw do
  get '/widget_content', to: 'widgets#content', as: :widget_content
end

登录后复制

# app/controllers/widgets_controller.rb
def content
  render layout: false
end

登录后复制

创建小部件内容 HTML：创建要在 iframe 内呈现的视图

<!-- app/views/widgets/content.html.erb -->
<div>



<h2>
  
  
  Step 4: Setting Headers for Iframe Embedding
</h2>

<p>Configure the appropriate HTTP headers to ensure your widget works securely in an iframe. There are two primary headers to consider:</p>

<p><strong>Remove the X-Frame-Options Header</strong>: The X-Frame-Options header is deprecated but still widely respected by many browsers. To remove it, add the following configuration in an initializer:<br>
</p>

<pre class="brush:php;toolbar:false"># config/initializers/security_headers.rb
Rails.application.config.action_dispatch.default_headers.delete('X-Frame-Options')

登录后复制

设置 Frame-Ancestors 指令：现代且更灵活的方法是将 Content-Security-Policy 与frame-ancestors 指令结合使用，它允许您指定允许嵌入小部件的域一个 iframe。根据您的安全要求，根据需要调整此标头。

# config/initializers/security_headers.rb
Rails.application.config.action_dispatch.default_headers.merge!({
  'Content-Security-Policy' => "frame-ancestors 'self' https://trusted-domain.com"
})

登录后复制

此配置允许您的应用程序仅通过指定的域嵌入到 iframe 中。将 https://trusted-domain.com 替换为您信任的实际域。

第 5 步：测试小部件

设置小部件和标题后，通过将小部件嵌入到各种浏览器的测试页面上来测试小部件，以确保兼容性。如果您使用了框架祖先，请确认只有指定的域可以嵌入您的小部件并且小部件按预期显示。

第 6 步：使用版本化路由和控制器添加版本支持

随着您的小部件的发展，您可能会引入并非所有客户都准备好立即采用的新功能或改进。支持小部件的多个版本可确保向后兼容性，允许客户按照自己的节奏进行升级，而不会中断其现有的集成。

使用版本化路由和控制器实现版本支持

定义版本化路由

首先为每个版本的小部件设置单独的路由。每个版本的命名空间可以使您的代码保持井井有条，并允许您独立管理不同的版本。

# app/controllers/widgets_controller.rb
class WidgetsController < ApplicationController
  def show
    # Your widget code here
  end
end

登录后复制

创建版本化控制器

对于每个版本，在其命名空间内创建一个控制器。这种分离确保一个版本中的更改不会影响其他版本。

# config/routes.rb
Rails.application.routes.draw do
  get '/widget.js', to: 'widgets#show', as: :widget
end

登录后复制

# app/controllers/widgets_controller.rb
class WidgetsController < ApplicationController
  def show
    response.headers['Content-Type'] = 'application/javascript'
    render layout: false
  end
end

登录后复制

创建特定于版本的 JavaScript 和 HTML 视图

每个版本都可以有自己的 JavaScript 和 HTML 文件，允许您定制每个版本的功能和外观。

版本 1 JavaScript：

// app/views/widgets/show.js.erb
(function() {
  const widgetDiv = document.createElement('div');
  widgetDiv.id = 'custom-widget';
  widgetDiv.innerHTML = "<p>This is your custom widget content!</p>";
  document.body.appendChild(widgetDiv);
})();

登录后复制

版本 1 内容：

<!-- Client Embeddable Code -->
<script type="text/javascript">
  (function() {
    const script = document.createElement('script');
    script.src = "https://yourapp.com/widget.js";
    script.async = true;
    document.head.appendChild(script);
  })();
</script>

登录后复制

版本 2 内容：

// app/views/widgets/show.js.erb
(function() {
  const iframe = document.createElement('iframe');
  iframe.src = "<%= widget_content_url %>";
  iframe.style.width = "300px";
  iframe.style.height = "200px";
  document.body.appendChild(iframe);
})();

登录后复制