将用 Ruby on Rails 编码的网页嵌入另一个网站？答案

【问题标题】：Embed web page coded in Ruby on Rails in another web site?将用 Ruby on Rails 编码的网页嵌入另一个网站？
【发布时间】：2012-07-27 06:22:54
【问题描述】：

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

非常感谢。

码头。

【问题讨论】：

标签： ruby-on-rails embed

【解决方案1】：

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

如果我们使用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 调用可能会产生跨浏览器请求问题。

让我们首先使用 Sinatra 创建一个简单的网页，我们将使用它来嵌入我们的 Rails 小部件：

mkdir host_page
cd host_page

使用您的文本编辑器在host_page 文件夹中创建host.rb 文件：

# 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)%>");

这里我们使用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 中查看您的小部件。

【讨论】：

您将需要弄清楚如何使用此示例提供跨域 ajax 调用。可以使用rack-cors gem

【解决方案2】：

如果现在有人遇到这种情况，差不多 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"

我有一些视图/页面/index.js.erb，其中包含一些呈现小部件的 JS 代码。

（我使用的是 Rails 6.1.4）

【讨论】：

【解决方案3】：

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

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

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

Github 或 Documentation 上的宝石

【讨论】：