2014-09-05 39 views
4

我正在構建Rails 4應用程序,我想要做的是爲我的用戶提供將我的內容嵌入到他們自己的網站的選項(像他們的博客)通過嵌入代碼。允許用戶將我的內容嵌入到他們的網站(如博客) - rails 4

換句話說,我想要一個帶有一些內容的erb頁面和一個說「Embed」的按鈕。當用戶點擊它時,會出現一小段嵌入代碼,他們可以複製並粘貼到他們的博客等。這將顯示我的網頁上的內容。

這樣做的最好方法是什麼?請儘可能描述一下,因爲我對此很陌生。謝謝!

+1

只需創建該嵌入查看模板,像'東西/路線:ID/embed',然後提供像iframe或腳本進行嵌入,只需確保緩存這些頁面,以便能夠處理增加的請求。 – 2014-09-05 22:42:53

回答

10

的iFrame

它與目前的技術實現的方式是通常使用iframe,從JS調用客戶端網站上。你必須確保你有正確的CORS policy設置(允許從遠程站點的連接)


這裏是如何你會從高層次的角度做到這一點:

#config/routes.rb 
namespace :embed do 
    resources :pages, only: :show, path: "" # -> domain.com/embed/1 
end 

這會給你所謂的endpoint - 你將能夠從你的客戶網站(嵌入代碼)指出。從本質上說,它會給你用你的JS窗口小部件與your_domain.com/embed/:blog_post_number

此連接,然後可以用相應的控制器處理能力:

#app/controllers/embed/pages_controller.rb 
class PagesController < ApplicationController 
    layout false 
    def show 
     @page = Page.find params[:id] 
    end 
end 

#app/views/embed/pages/show.html.erb 
<%= @page.title %> 

,這會使得pages控制器的show方法,這將在沒有佈局的情況下渲染相應的視圖。這將做對自己沒有什麼,但如果你從一個JavaScript控件正確地調用它,你就可以在你的iFrame來顯示它


JS

因此你需要一個小部件「嵌入」您的代碼。這樣做的典型方法是創建一個駐留在服務器上的JavaScript「小部件」(位於public目錄中)。然後,系統會提示用戶調用這個腳本時,它們嵌入代碼:

#public/embed.js 
window.onload = function() { 

    //Params 
    var scriptPram = document.getElementById('load_widget'); 
    var id = scriptPram.getAttribute('data-page'); 

    /iFrame 
    var iframe = document.createElement('iframe'); 
    iframe.style.display = "none"; 
    iframe.src = "embed/" + id; 
    document.body.appendChild(iframe); 
}; 

然後,您會提示用戶嵌入以下JS:

<script id="load_widget" src="http://domain.com/embed.js" data-page="1"></script> 

這裏有一個great resource

此處的底線目標是提供在用戶的網站上嵌入iframe的功能,該功能最終會調用您的網址domain.com/embed/:id url

上述代碼可能有點臃腫(Youtube只是讓你直接在你的網站上放置一個「裸體」iframe)。你如何做到這將取決於你想擁有的複雜性,以及未來擴展計劃的


CORS

最後,你需要管理的"CORS" (Cross Origin Resource Sharing policy)。這是一個標準協議,它基本上防止來自非原始域的任何XHR請求。

CORS的原因是它會阻止你的服務器被XHR上的匿名請求攻擊。我不確定它的深層架構意義 - 但是您一定需要確保您已在服務器上設置CORS策略,以允許調用/顯示嵌入頁面。

最有效的方法在Rails中實現這一目標是與RACK-CORS gem

#config/application.rb 
config.middleware.use Rack::Cors do 
    allow do 
    origins '*' 
    resource '/embed.js', :headers => :any, :methods => [:get, :post, :options] #-> I believe resource needs to be a specific URL - will have to check this 
    end 
end 
+2

這是完美的,非常感謝你! – 2014-09-08 17:02:35

相關問題