Suppose you want to create a widget for a mobile app store. The widget allows you to embed information of a specific application on any web page.
If we use a script tag, the nested code might look like this:
<script src="http://my_appstore.com/apps/1234.js" type="text/javascript"></script>
Where 1234 will be the identifier of the specific application that we would like to implement.
If we use an iframe tag, the code for posting on other web pages might look like this:
<iframe src="http://my_appstore.com/apps/1234" width="500" height="200" frameborder="0"></iframe>
First of all, we must decide what type of tag to use. Using an iframe tag is more straight forward, but we are limited to using an iframe. Using an iframe is not a bad option, but if you distribute it to third-party web pages, you will not be able to change this later. Instead, it is preferable to use a script tag that will insert an iframe. This tag will also allow you to switch to including your content directly on the pages if you want to do this later.
Inserting an iframe means that the proportions of your content must be corrected and cannot be changed in order to adapt to different window sizes in the parent window. Embedding content is not directly related to this problem, but you have to be very careful with CSS and add style to all your elements, because otherwise they inherit the page styles of the main page. Also embedding content directly and then making AJAX calls is likely to cause cross-browser issues if you are not using JSONP.
First, create a simple web page with Sinatra , which we will use to embed the Rails widget:
mkdir host_page cd host_page
In the text editor, create the host.rb file inside the host_page folder:
# host.rb require 'sinatra' get '/' do erb :index end
Create index.erb and run host_page:
mkdir views cat '<script src="http://localhost:3000/apps/1234.js" type="text/javascript"></script>' > views/index.erb ruby host.rb
Now, if we visit http://localhost:4567/ , we will not see anything, but a widget will appear soon.
Now create a rails application that will be deployed. Start with a new folder for your project and do:
rails new widget cd widget/ rails g controller apps rm app/assets/javascripts/apps.js.coffee
Add the necessary routes:
# config/routes.rb MyApp::Application.routes.draw do resources :apps end
Edit the application controller:
# 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
In this controller, we always return the same application. In a real situation, we will have a model and a controller that will extract the corresponding application data from the model identifier found in the parameters.
Create your javascript view and start the server:
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
What is it. Go to http://localhost:4567/ and look at your widget.
If you want to use iframe , replace the contents of your show.js.erb file with this:
document.write("<%=escape_javascript(content_tag(:iframe, '', :src => app_url(params['id'])).html_safe)%>");
Here we use content_tag , but this can also be done similarly to the previous one, simply using the <iframe> tag as before.
Obviously, if we use an iframe, we make two calls, one to render the iframe and the other to load the contents of this iframe. For this second call, we still lack the html view. Just create a view as follows:
# app/views/apps/show.html.erb <h3><% =@mobile _app[:title]%></h3> <p><% =@mobile _app[:descr]%></p> <p><em><% =@mobile _app[:rating]%></em><p>
Now you can specify http://localhost:4567/ again and see your widget inside the iframe .