7

我想让我用 Ruby on Rails 编码的网页作为后端可嵌入,以便用户能够通过复制和粘贴一些嵌入代码来轻松共享它。(很像 YouTube 嵌入代码,但对于网页)有人可以指点我一个教程或一般方向如何去做吗?我打算在 Joomla CMS 中嵌入我的网页。

非常感谢。

码头。

4

3 回答 3

18

假设您要为移动应用商店创建一个小部件。该小部件将允许在任何网页中嵌入某个应用程序的信息。

如果我们使用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>

我们必须决定的第一件事是使用什么样的标签。使用 andiframe标记更直接,但我们仅限于使用 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>

现在您可以再次指向并在iframehttp://localhost:4567/中查看您的小部件。

于 2013-02-11T18:57:04.550 回答
1

如果有人现在遇到这个,差不多9年后......

如果您使用 JavaScript 方法,则必须允许跨域请求,例如上面评论中提到的@abessive。我可以通过将它添加到我的控制器类的顶部来做到这一点:

protect_from_forgery except: :method

:method为嵌入请求调用的方法在哪里。

这是我的控制器:

class PagesController < ApplicationController
  protect_from_forgery except: :home

  def home
    render 'index.js'
  end
end

以及 routes.rb 中的相关路由:

get "index.js", to: "pages#home"

我有views/pages/index.js.erb 和一些呈现小部件的JS 代码。

(我使用的是 Rails 6.1.4)

于 2022-01-23T21:25:31.110 回答
0

有点晚了,但我在自己寻找解决方案时偶然发现了这个问题。我找到了一个完全符合描述的宝石。它将使您的 Rails 应用程序像 YouTube 视频或来自其他网页(如 Google 地图、Instagram、Twitter)的内容一样可嵌入......它被称为 EmbedMe

要使用,您只需更改要定义的路径,哪些路径需要是可嵌入的

get 'private', to: 'application#private'
embeddable do
  get 'embeddable', to: 'application#embeddable'
end

Github上的 Gem或文档

于 2021-07-21T14:39:00.723 回答