創(chuàng)建可嵌入客戶端網(wǎng)站的自定義 JavaScript 小部件是擴(kuò)展 Ruby on Rails 應(yīng)用程序范圍的有效方法。無論是聊天框、分析跟蹤器還是任何其他交互元素，自定義小部件都可以讓您直接向用戶提供功能。讓我們逐步了解構(gòu)建安全、可嵌入小部件的步驟并介紹最佳實(shí)踐。

目錄

?1. 第 1 步：設(shè)置
?2. 第 2 步：為客戶端創(chuàng)建嵌入代碼
?3. 第 3 步：將您的小部件嵌入到 Iframe 中（可選）
?4. 第 4 步：設(shè)置 Iframe 嵌入的標(biāo)頭
?5.第5步：測試小部件
?6. 第 6 步：使用版本化路由和控制器添加版本支持

第 1 步：設(shè)置

創(chuàng)建一個(gè)新的 Rails 端點(diǎn)：該端點(diǎn)將為您的小部件提供 JavaScript 代碼。通常，這可能是 WidgetsController 中的一個(gè)操作：

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

配置路線：設(shè)置路線以使小部件可訪問。

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

從控制器提供 JavaScript：在 Rails 中，您可以通過設(shè)置適當(dāng)?shù)膬?nèi)容類型來使用 JavaScript 進(jìn)行響應(yīng)。

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

為您的小部件編寫 JavaScript 代碼：小部件腳本通常包含在客戶端頁面上呈現(xiàn)自定義 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 步：為客戶創(chuàng)建嵌入代碼

要允許客戶嵌入您的小部件，請?zhí)峁┮粋€(gè) JavaScript 片段，他們可以將其復(fù)制并粘貼到 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 中（可選）

考慮將小部件內(nèi)容嵌入到 iframe 中，以更好地隔離和控制樣式。這種方法使小部件的樣式和行為與客戶端站點(diǎn)分開。

更新 JavaScript 代碼以為小部件創(chuàng)建 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);
})();

為小部件內(nèi)容定義新的路由和視圖：

# 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

創(chuàng)建小部件內(nèi)容 HTML：創(chuàng)建要在 iframe 內(nèi)呈現(xiàn)的視圖

<!-- 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')

設(shè)置 Frame-Ancestors 指令：現(xiàn)代且更靈活的方法是將 Content-Security-Policy 與frame-ancestors 指令結(jié)合使用，它允許您指定允許嵌入小部件的域一個(gè) iframe。根據(jù)您的安全要求，根據(jù)需要調(diào)整此標(biāo)頭。

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

此配置允許您的應(yīng)用程序僅通過指定的域嵌入到 iframe 中。將 https://trusted-domain.com 替換為您信任的實(shí)際域。

第 5 步：測試小部件

設(shè)置小部件和標(biāo)題后，通過將小部件嵌入到各種瀏覽器的測試頁面上來測試小部件，以確保兼容性。如果您使用了框架祖先，請確認(rèn)只有指定的域可以嵌入您的小部件并且小部件按預(yù)期顯示。

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

隨著您的小部件的發(fā)展，您可能會(huì)引入并非所有客戶都準(zhǔn)備好立即采用的新功能或改進(jìn)。支持小部件的多個(gè)版本可確保向后兼容性，允許客戶按照自己的節(jié)奏進(jìn)行升級(jí)，而不會(huì)中斷其現(xiàn)有的集成。

使用版本化路由和控制器實(shí)現(xiàn)版本支持

定義版本化路由

首先為每個(gè)版本的小部件設(shè)置單獨(dú)的路由。每個(gè)版本的命名空間可以使您的代碼保持井井有條，并允許您獨(dú)立管理不同的版本。

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

創(chuàng)建版本化控制器

對于每個(gè)版本，在其命名空間內(nèi)創(chuàng)建一個(gè)控制器。這種分離確保一個(gè)版本中的更改不會(huì)影響其他版本。

# 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

創(chuàng)建特定于版本的 JavaScript 和 HTML 視圖

每個(gè)版本都可以有自己的 JavaScript 和 HTML 文件，允許您定制每個(gè)版本的功能和外觀。

版本 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 內(nèi)容：

<!-- 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 內(nèi)容：

// 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);
})();

最后的想法

為 Rails 應(yīng)用程序創(chuàng)建可嵌入小部件涉及幾個(gè)關(guān)鍵注意事項(xiàng)：安全地提供 JavaScript、管理樣式以及正確配置標(biāo)頭以實(shí)現(xiàn) iframe 兼容性。通過執(zhí)行上述步驟，您將擁有一個(gè)小部件，客戶可以輕松地將其添加到其站點(diǎn)，從而擴(kuò)展 Rails 應(yīng)用程序的可用性。

以上是使用 Rails 順利嵌入 JS 小部件：分步指南的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！