Benamkan Widget JS dengan Lancar dengan Rails: Panduan Langkah demi Langkah

Membuat widget JavaScript tersuai yang boleh dibenamkan dalam tapak web pelanggan ialah cara yang berkesan untuk meluaskan jangkauan aplikasi Ruby on Rails anda. Sama ada kotak sembang, penjejak analitik atau mana-mana elemen interaktif lain, widget tersuai membolehkan anda membawa fungsi terus kepada pengguna. Mari kita ikuti langkah membina widget yang selamat dan boleh dibenamkan dan merangkumi amalan terbaik.

Jadual Kandungan

 1. Langkah 1: Persediaan
 2. Langkah 2: Mencipta Kod Benam untuk Pelanggan
 3. Langkah 3: Membenamkan Widget Anda dalam Iframe (Pilihan)
 4. Langkah 4: Menetapkan Pengepala untuk Iframe Embedding
 5. Langkah 5: Uji Widget
 6. Langkah 6: Menambah Sokongan Versi dengan Laluan dan Pengawal Versi

Langkah 1: Persediaan

Buat titik akhir Rails baharu: Titik akhir ini akan menyediakan kod JavaScript untuk widget anda. Biasanya, ini boleh menjadi tindakan dalam WidgetsController:

# app/controllers/widgets_controller.rb
class WidgetsController 



<p>Konfigurasikan Laluan: Sediakan laluan untuk menjadikan widget boleh diakses.<br>
</p>

<pre class="brush:php;toolbar:false"># config/routes.rb
Rails.application.routes.draw do
  get '/widget.js', to: 'widgets#show', as: :widget
end

Layankan JavaScript daripada Pengawal: Dalam Rails, anda boleh bertindak balas dengan JavaScript dengan menetapkan jenis kandungan yang sesuai.

# app/controllers/widgets_controller.rb
class WidgetsController 



<p>Tulis Kod JavaScript untuk Widget Anda: Skrip widget biasanya termasuk logik untuk memaparkan elemen HTML tersuai atau iframe pada halaman klien.<br>
</p>

<pre class="brush:php;toolbar:false">// 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);
})();

Langkah 2: Mencipta Kod Benam untuk Pelanggan

Untuk membolehkan pelanggan membenamkan widget anda, sediakan coretan JavaScript yang boleh mereka salin dan tampal ke dalam HTML mereka:

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

Langkah 3: Membenamkan Widget Anda dalam Iframe (Pilihan)

Pertimbangkan untuk membenamkan kandungan widget dalam iframe untuk lebih pengasingan dan kawalan ke atas penggayaan. Pendekatan ini memastikan penggayaan dan tingkah laku widget berasingan daripada tapak pelanggan.

Kemas kini Kod JavaScript untuk membuat iframe untuk widget:

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

Tentukan Laluan dan Paparan Baharu untuk Kandungan Widget:

# 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

Cipta HTML Kandungan Widget: Cipta paparan untuk dipaparkan di dalam 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')

Tetapkan Arahan Frame-Ancestors:Pendekatan moden dan lebih fleksibel ialah menggunakan Content-Security-Policy dengan arahan frame-ancestors, yang membolehkan anda menentukan domain yang dibenarkan untuk membenamkan widget anda dalam iframe. Laraskan pengepala ini mengikut keperluan berdasarkan keperluan keselamatan anda.

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

Konfigurasi ini membenarkan apl anda dibenamkan dalam iframe hanya oleh domain yang ditentukan. Gantikan https://trusted-domain.com dengan domain sebenar yang anda percayai.

Langkah 5: Uji Widget

Setelah anda menyediakan widget dan pengepala, uji widget dengan membenamkannya pada halaman ujian dalam pelbagai penyemak imbas untuk memastikan keserasian. Jika anda telah menggunakan moyang bingkai, sahkan bahawa hanya domain yang ditentukan boleh membenamkan widget anda dan widget itu dipaparkan seperti yang diharapkan.

Langkah 6: Menambah Sokongan Versi dengan Laluan dan Pengawal Versi

Apabila widget anda berkembang, anda mungkin memperkenalkan ciri atau penambahbaikan baharu yang tidak semua pelanggan bersedia untuk menerima pakai serta-merta. Menyokong berbilang versi widget anda memastikan keserasian ke belakang, membolehkan pelanggan menaik taraf mengikut kadar mereka sendiri tanpa mengganggu integrasi sedia ada mereka.

Melaksanakan Sokongan Versi Menggunakan Laluan dan Pengawal Versi

Tentukan Laluan Versi

Mulakan dengan menyediakan laluan berasingan untuk setiap versi widget anda. Jarak nama setiap versi memastikan kod anda teratur dan membolehkan anda mengurus versi berbeza secara bebas.

# app/controllers/widgets_controller.rb
class WidgetsController 



<h4>
  
  
  Buat Pengawal Versi
</h4>

<p>Untuk setiap versi, buat pengawal dalam ruang namanya. Pemisahan ini memastikan bahawa perubahan dalam satu versi tidak menjejaskan yang lain.<br>
</p>

<pre class="brush:php;toolbar:false"># config/routes.rb
Rails.application.routes.draw do
  get '/widget.js', to: 'widgets#show', as: :widget
end

# app/controllers/widgets_controller.rb
class WidgetsController 



<h4>
  
  
  Buat Paparan JavaScript dan HTML Khusus Versi
</h4>

<p>Setiap versi boleh mempunyai fail JavaScript dan HTML sendiri, membolehkan anda menyesuaikan fungsi dan penampilan setiap versi.</p>

<p><strong>JavaScript Versi 1:</strong><br>
</p>

<pre class="brush:php;toolbar:false">// 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);
})();

Versi 1 Kandungan:

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

Kandungan Versi 2:

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

Fikiran Akhir

Mencipta widget boleh terbenam untuk aplikasi Rails melibatkan beberapa pertimbangan utama: menyediakan JavaScript dengan selamat, mengurus gaya dan mengkonfigurasi pengepala dengan betul untuk keserasian iframe. Dengan mengikuti langkah di atas, anda akan mempunyai widget yang boleh ditambahkan oleh pelanggan pada tapak mereka dengan mudah, mengembangkan kebolehgunaan aplikasi Rails anda.