在另一个网站上嵌入在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并不是一个糟糕的选择,但如果将其分发给第三方网页,您将无法在之后进行更改.相反,最好使用script将插入iframe 的标记.如果您之后选择这样做,此标记还允许您切换到将内容直接嵌入页面中.

插入iframe意味着必须修复内容的比例,并且不能更改以适应父窗口中的不同窗口大小.直接嵌入您的内容没有这个问题,但您必须非常小心CSS并为所有元素添加样式,否则它们将继承主页样式.除非您使用JSONP,否则直接嵌入您的内容然后进行AJAX调用可能会产生跨浏览器请求问题.

让我们首先使用Sinatra创建一个简单的网页,我们将使用它来嵌入我们的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

在那个控制器中,我们总是返回相同的应用程序.在实际情况中,我们将有一个模型和控制器,它将从params中找到的模型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)%>");

在这里我们使用a,content_tag但它也可以通过<iframe>像以前一样使用标签以类似于前一个的方式完成.

显然,如果我们使用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中查看您的小部件.