我想让我用 Ruby on Rails 编码的网页作为后端可嵌入,以便用户能够通过复制和粘贴一些嵌入代码来轻松共享它。(很像 YouTube 嵌入代码,但对于网页)有人可以指点我一个教程或一般方向如何去做吗?我打算在 Joomla CMS 中嵌入我的网页。
非常感谢。
码头。
我想让我用 Ruby on Rails 编码的网页作为后端可嵌入,以便用户能够通过复制和粘贴一些嵌入代码来轻松共享它。(很像 YouTube 嵌入代码,但对于网页)有人可以指点我一个教程或一般方向如何去做吗?我打算在 Joomla CMS 中嵌入我的网页。
非常感谢。
码头。
假设您要为移动应用商店创建一个小部件。该小部件将允许在任何网页中嵌入某个应用程序的信息。
如果我们使用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/
中查看您的小部件。
如果有人现在遇到这个,差不多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)
有点晚了,但我在自己寻找解决方案时偶然发现了这个问题。我找到了一个完全符合描述的宝石。它将使您的 Rails 应用程序像 YouTube 视频或来自其他网页(如 Google 地图、Instagram、Twitter)的内容一样可嵌入......它被称为 EmbedMe
要使用,您只需更改要定义的路径,哪些路径需要是可嵌入的
get 'private', to: 'application#private'
embeddable do
get 'embeddable', to: 'application#embeddable'
end