我正在構建Rails 4應用程序,我想要做的是爲我的用戶提供將我的內容嵌入到他們自己的網站的選項(像他們的博客)通過嵌入代碼。允許用戶將我的內容嵌入到他們的網站(如博客) - rails 4
換句話說,我想要一個帶有一些內容的erb頁面和一個說「Embed」的按鈕。當用戶點擊它時,會出現一小段嵌入代碼,他們可以複製並粘貼到他們的博客等。這將顯示我的網頁上的內容。
這樣做的最好方法是什麼?請儘可能描述一下,因爲我對此很陌生。謝謝!
我正在構建Rails 4應用程序,我想要做的是爲我的用戶提供將我的內容嵌入到他們自己的網站的選項(像他們的博客)通過嵌入代碼。允許用戶將我的內容嵌入到他們的網站(如博客) - rails 4
換句話說,我想要一個帶有一些內容的erb頁面和一個說「Embed」的按鈕。當用戶點擊它時,會出現一小段嵌入代碼,他們可以複製並粘貼到他們的博客等。這將顯示我的網頁上的內容。
這樣做的最好方法是什麼?請儘可能描述一下,因爲我對此很陌生。謝謝!
的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
這是完美的,非常感謝你! – 2014-09-08 17:02:35
只需創建該嵌入查看模板,像'東西/路線:ID/embed',然後提供像iframe或腳本進行嵌入,只需確保緩存這些頁面,以便能夠處理增加的請求。 – 2014-09-05 22:42:53