Webseite in Ruby on Rails in eine andere Website einbetten?

Question

Ich möchte meine Webseite, die ich mit Ruby on Rails als backend embeddable kodiert habe, so dass Benutzer in der Lage sind, sie leicht durch Kopieren und Einfügen von einbetten Code zu teilen. (ähnlich wie YouTube Code einbetten, aber für eine Webseite) Könnte mir jemand auf ein Tutorial oder eine allgemeine Anleitung hinweisen, wie ich vorgehen soll? Ich plane meine Webseite in Joomla CMS einzubetten.

Vielen Dank.

Pier.

Answer 1

Angenommen, Sie möchten ein Widget für einen mobilen App Store erstellen. Das Widget würde es ermöglichen, Informationen einer bestimmten App in jede Webseite einzubetten.

Wenn wir die script-Tag verwenden, könnte der embeddable Code wie folgt aussehen:

<script src="http://my_appstore.com/apps/1234.js" type="text/javascript"></script> 

Wo 1234 die ID der spezifischen app würden wir einbetten möchten.

Wenn wir verwenden, um den iframe Tag den Code in anderen Web-Seiten zu setzen aussehen könnte:

<iframe src="http://my_appstore.com/apps/1234" width="500" height="200" frameborder="0"></iframe> 

Das erste, was wir zu entscheiden haben, welche Art von Tag zu verwenden. Die Verwendung von und iframe Tags ist einfacher, aber wir können nur einen iframe verwenden. Die Verwendung eines Iframes ist keine schlechte Option, aber wenn Sie diese auf Webseiten von Drittanbietern verteilen, können Sie diese später nicht mehr ändern. Stattdessen ist es vorzuziehen, ein script Tag zu verwenden, das einen iframe einfügen wird. Mit diesem Tag können Sie auch entscheiden, ob Sie Ihren Inhalt direkt in Seiten einbetten möchten, wenn Sie dies später tun.

Das Einfügen eines iframe bedeutet, dass die Proportionen Ihres Inhalts korrigiert werden müssen und nicht geändert werden können, um an unterschiedliche Fenstergrößen im übergeordneten Fenster angepasst zu werden. Wenn Sie Ihren Inhalt direkt einbetten, tritt dieses Problem nicht auf, aber Sie müssen sehr vorsichtig mit CSS sein und allen Ihren Elementen einen Stil hinzufügen, da sie sonst die Stile der Host-Seite erben. Wenn Sie Ihre Inhalte direkt einbetten und dann AJAX-Aufrufe durchführen, werden wahrscheinlich Probleme mit browserübergreifenden Anfragen entstehen, wenn Sie JSONP nicht verwenden.

Lassen Sie uns zunächst eine einfache Webseite mit Sinatra erstellen, die wir einbetten nutzen, um unsere Rails Widget:

mkdir host_page 
cd host_page 

Mit Ihrem Texteditor erstellen host.rb Datei in host_page Ordner:

# host.rb 
require 'sinatra' 
get '/' do 
    erb :index 
end 

Erstellen Sie index.erb und starten Sie host_page:

mkdir views 
cat '<script src="http://localhost:3000/apps/1234.js" type="text/javascript"></script>' > views/index.erb 
ruby host.rb 

Jetzt, wenn wir http://localhost:4567/ besuchen, sehen wir nichts, aber es wird bald ein Widget dort geben.

Lassen Sie uns nun die Rails-App erstellen, die eingebettet wird.Beginnen Sie mit einem neuen Ordner für Ihr Projekt und zu tun:

rails new widget 
cd widget/ 
rails g controller apps 
rm app/assets/javascripts/apps.js.coffee 

die benötigten Routen hinzufügen:

# config/routes.rb 
MyApp::Application.routes.draw do 
    resources :apps 
end 

Bearbeiten Sie Ihre Apps Controller:

# app/controllers/apps_controller.rb 
class AppsController < ApplicationController 
    def show 
    @mobile_app = { 
     :title => "Piano Tutorial", 
     :descr => "Learn to play piano with this interactive app", 
     :rating => "*****" 
    } 
    end 
end 

In diesem Controller wir immer zurückkehren, werden die gleiche App In einer realen Situation hätten wir ein Modell und den Controller, der die entsprechenden App-Daten aus der Modell-ID in Params abrufen würde.

Erstellen Sie Javascript Ansicht und starten Sie den Server:

echo 'document.write("<h3><%=@mobile_app[:title]%></h3><p><%=@mobile_app[:descr]%></p><p><em><%=@mobile_app[:rating]%></em><p>");' > app/views/apps/show.js.erb 
rails server 

Und das ist es. Gehe zu http://localhost:4567/ und sehe dein Widget.

Falls Sie mit diesem einen iframe, ersetzen Sie den Inhalt Ihrer show.js.erb-Datei verwenden:

document.write("<%=escape_javascript(content_tag(:iframe, '', :src => app_url(params['id'])).html_safe)%>"); 

Hier verwenden wir ein content_tag aber auch in ähnlicher Weise wie die vorherigen getan werden könnte, eine, indem Sie einfach wie zuvor das -Tag verwenden.

Offensichtlich machen wir zwei Aufrufe, wenn wir einen Iframe verwenden, einen, um den Iframe zu rendern und den anderen, um den Inhalt dieses Iframes zu laden. Für diesen zweiten Aufruf fehlt uns noch eine HTML-Ansicht. Erstellen Sie einfach die Ansicht wie folgt aus:

# app/views/apps/show.html.erb 
<h3><%=@mobile_app[:title]%></h3> 
<p><%=@mobile_app[:descr]%></p> 
<p><em><%=@mobile_app[:rating]%></em><p> 

Jetzt können Sie wieder zu http://localhost:4567/ zeigen und Ihr Widget innerhalb eines iframe sehen.