Załóżmy, że chcesz utworzyć widżet dla sklepu z aplikacjami mobilnymi. Widżet pozwoliłby na umieszczenie informacji o konkretnej aplikacji na dowolnej stronie internetowej.
Jeśli użyjemy znacznika script
kod do osadzenia mógłby wyglądać następująco:
<script src="http://my_appstore.com/apps/1234.js" type="text/javascript"></script>
Gdzie 1234 byłby id specyficznej aplikacji chcielibyśmy umieścić.
Jeśli użyjemy znacznika iframe
kod, aby umieścić na innych stronach internetowych, może wyglądać tak:
<iframe src="http://my_appstore.com/apps/1234" width="500" height="200" frameborder="0"></iframe>
Pierwszą rzeczą, musimy zdecydować, jaki rodzaj tagu użyć. Używanie tagu i tagu iframe
jest prostsze, ale ograniczamy się do używania elementu iframe. Używanie elementu iframe nie jest złą opcją, ale jeśli rozpowszechnisz to na stronach internetowych stron trzecich, nie będziesz w stanie zmienić tego później. Zamiast tego lepiej jest użyć znacznika script
, który wstawi element iframe. Tag ten pozwala również na umieszczanie treści bezpośrednio na stronach, jeśli zdecydujesz się to zrobić później.
Wkładanie iframe oznacza, że proporcje treści muszą być stałe i nie można zmienić, aby dostosować się do różnych rozmiarów okien w oknie nadrzędnym. Osadzanie treści bezpośrednio nie ma tego problemu, ale musisz bardzo uważać na CSS i dodawać stylu do wszystkich elementów, ponieważ w przeciwnym razie odziedziczą style strony hosta. Również osadzanie treści bezpośrednio, a następnie wykonywanie wywołań AJAX prawdopodobnie spowoduje problemy z różnymi przeglądarkami, chyba że użyjesz JSONP.
Niech najpierw stworzyć prostą stronę internetową z Sinatra że będziemy używać, aby umieścić nasz Szyny Widget:
mkdir host_page
cd host_page
W edytorze tekstu utwórz host.rb
plik wewnątrz host_page
folderu:
# host.rb
require 'sinatra'
get '/' do
erb :index
end
Utwórz index.erb
i uruchom host_page:
mkdir views
cat '<script src="http://localhost:3000/apps/1234.js" type="text/javascript"></script>' > views/index.erb
ruby host.rb
Teraz, jeśli odwiedzimy http://localhost:4567/
, nic nie zobaczymy, ale wkrótce pojawi się widget.
Stwórzmy teraz aplikację szyny, która będzie osadzona.Start z nowym folderze swojego projektu i zrobić:
rails new widget
cd widget/
rails g controller apps
rm app/assets/javascripts/apps.js.coffee
Dodaj potrzebnych tras:
# config/routes.rb
MyApp::Application.routes.draw do
resources :apps
end
Edycja kontroler aplikacji:
# 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
W tym kontrolerze jesteśmy zawsze zwracając ta sama aplikacja. W rzeczywistej sytuacji dysponowalibyśmy modelem i kontrolerem, który pobrałby odpowiednie dane aplikacji z identyfikatora modelu znalezionego w parametrach.
Tworzenie widoku JavaScript i uruchomić serwer:
echo 'document.write("<h3><%[email protected]_app[:title]%></h3><p><%[email protected]_app[:descr]%></p><p><em><%[email protected]_app[:rating]%></em><p>");' > app/views/apps/show.js.erb
rails server
I to wszystko. Przejdź do http://localhost:4567/
i zobacz swój widget.
W przypadku, gdy chcesz użyć iframe, zastąpić zawartość pliku show.js.erb
z tym:
document.write("<%=escape_javascript(content_tag(:iframe, '', :src => app_url(params['id'])).html_safe)%>");
Tutaj używamy content_tag
ale może to być również wykonane w sposób podobny poprzedni jeden po prostu używając znacznika jak poprzednio.
Oczywiście jeśli używamy iframe, robimy dwa telefony, jeden do renderowania iframe, a drugi, aby załadować zawartość tego iframe. W przypadku tego drugiego połączenia wciąż brakuje nam widoku HTML. Wystarczy utworzyć widok tak:
# app/views/apps/show.html.erb
<h3><%[email protected]_app[:title]%></h3>
<p><%[email protected]_app[:descr]%></p>
<p><em><%[email protected]_app[:rating]%></em><p>
Teraz można wskazać ponownie http://localhost:4567/
i zobaczyć widżet wewnątrz iframe.
Będziesz musiał dowiedzieć się jak obsługiwać wywołania ajaxowe w domenie w tym przykładzie. Możliwe użycie klejnotu '' 'rack-cors''' – absessive