在另一個網站上嵌入用Ruby on Rails編碼的網頁？

Question

我想使用Ruby on Rails編寫的網頁作爲後端可嵌入，以便用戶能夠通過複製和粘貼一些嵌入代碼輕鬆分享。 （很像YouTube嵌入代碼，但對於一個網頁） 有人能指點我一個教程或一般方向如何去做呢？ 我打算將我的網頁嵌入到Joomla CMS中。

非常感謝。

碼頭。

Answer 1

假設您想要爲移動應用商店創建一個Widget。該小部件將允許在任何網頁中嵌入某個應用程序的信息。

如果我們使用script標籤，可嵌入的代碼看起來是這樣的：

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

凡1234將是我們將要嵌入的特定應用的ID。

如果我們使用iframe標籤的代碼放在其他網頁看起來是這樣：

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

我們必須決定的第一件事是什麼樣的標籤的使用。使用和iframe標記更直接，但我們僅限於使用iframe。使用iframe不是一個不錯的選擇，但是如果你將它分發給第三方網頁，你將不能在之後改變它。相反，最好使用將插入iframe的script標籤。如果您之後選擇這樣做，該標籤還可以讓您切換到將內容直接嵌入到網頁中。

插入iframe意味着您的內容的比例必須是固定的，並且無法更改以適應父窗口中的不同窗口大小。直接嵌入您的內容不存在這個問題，但您必須非常小心CSS併爲所有元素添加樣式，否則它們將繼承主機頁樣式。除非您使用JSONP，否則直接嵌入您的內容然後進行AJAX調用可能會產生跨瀏覽器請求問題。

讓我們先創建一個簡單的網頁與西納特拉，我們將使用嵌入我們的的Rails的Widget：

mkdir host_page 
cd host_page 

用文本編輯器創建host.rb文件中host_page文件夾：

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

創建index.erb並啓動host_page：

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

現在，如果我們訪問http://localhost:4567/，我們什麼也看不到，但是很快就會出現一個小部件。

讓我們現在創建將嵌入的rails應用程序。開始與你的項目的新文件夾，並做到：

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

添加需要的路由：

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

編輯您的應用程序控制器：

# 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 

在這種控制器，我們總是返回相同的應用。在真實情況下，我們將擁有一個模型和控制器，它將從參數中找到的模型ID中檢索適當的應用程序數據。

創建您的javascript視圖並啓動服務器：

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 

就是這樣。前往http://localhost:4567/並查看您的小部件。

如果你想使用IFRAME，這個替換您的show.js.erb文件的內容：

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

在這裏，我們使用的是content_tag，但它也可以在類似以前的方式進行一種方法是像以前一樣僅使用標籤。

顯然，如果我們使用iframe，我們會做兩次調用，一次是渲染iframe，另一個是加載iframe的內容。對於第二次調用，我們仍然缺少html視圖。只要創建這樣的觀點：

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

現在你可以到http://localhost:4567/再次指向並看到一個IFRAME內部小部件。