attribute - document.getelementbyid javascript ejemplos

Permitir a los usuarios insertar mi contenido en sus sitios(como blogs)-rails 4

Question

Estoy construyendo una aplicación Rails 4, y lo que quiero hacer es ofrecer a mis usuarios la opción de insertar mi contenido en sus propios sitios (como su blog) a través de un código incrustado.

En otras palabras, quiero tener una página erb con algo de contenido y un botón que dice "Insertar". Cuando los usuarios hagan clic en eso, aparecerá un pequeño código incrustable que podrán copiar y pegar en su blog, etc. Esto mostrará el contenido de mi página.

¿Cuál es la mejor manera de resolver esto? Sé lo más descriptivo posible, ya que soy nuevo en esto. ¡Gracias!

Answer 1

iFrame

La forma en que se logra con la tecnología actual es generalmente usar un iframe , llamado desde JS en el sitio web del cliente. Deberá asegurarse de tener configurada la política CORS correcta (para permitir la conexión desde sitios remotos)

Así es como lo haría desde una perspectiva de alto nivel:

#config/routes.rb
namespace :embed do
   resources :pages, only: :show, path: "" # -> domain.com/embed/1
end

Esto le dará lo que se conoce como punto final , que podrá señalar desde los sitios web de sus clientes (código de inserción). En esencia, le dará la posibilidad de usar su widget JS para conectarse con your_domain.com/embed/:blog_post_number

Esto se puede manejar con el controlador correspondiente:

#app/controllers/embed/pages_controller.rb
class PagesController < ApplicationController
   layout false
   def show
      @page = Page.find params[:id]
   end
end

#app/views/embed/pages/show.html.erb
<%= @page.title %>

Esto representará el método de visualización del controlador de pages , que representará la vista correspondiente sin un diseño. Esto no hará nada por sí mismo, pero si lo llamas correctamente desde un widget javascript, podrás mostrarlo en tu iFrame

JS

Por lo tanto, necesitará un widget para "incrustar" su código. La forma típica de hacerlo es crear un "widget" de javascript que residirá en su servidor (en el directorio public ). A continuación, solicitará a los usuarios que invoquen este script cuando inserten el código:

#public/embed.js
window.onload = function() {

   //Params
   var scriptPram = document.getElementById(''load_widget'');
   var id = scriptPram.getAttribute(''data-page'');

   /iFrame
   var iframe = document.createElement(''iframe'');
   iframe.style.display = "none";
   iframe.src = "embed/" + id;
   document.body.appendChild(iframe);
};

A continuación, solicitará a los usuarios que incrusten el siguiente JS:

<script id="load_widget" src="http://domain.com/embed.js" data-page="1"></script>

Aquí hay un gran recurso

El objetivo final aquí es proporcionar la capacidad de incrustar un iframe en el sitio del usuario, que terminará llamando a su domain.com/embed/:id url

El código anterior puede estar un poco hinchado (Youtube simplemente te permite poner un iframe "desnudo" en tu sitio directamente). La forma en que lo haga dependerá de la complejidad que desee tener y de cualquier extensión futura que planee para

CORS

Finalmente, debe administrar los "CORS" (política de intercambio de recursos Cross Origin) . Este es un protocolo estándar que esencialmente evita cualquier solicitud de XHR desde dominios que no sean de origen.

El motivo de CORS es que evitará que su servidor sea atacado por solicitudes anónimas en XHR. No estoy seguro de las profundas implicaciones arquitectónicas, pero definitivamente deberá asegurarse de tener la política CORS configurada en su servidor para permitir que las páginas embebidas sean llamadas / mostradas.

La forma más eficiente de lograr esto en Rails es con la gema RACK-CORS :

#config/application.rb
config.middleware.use Rack::Cors do
  allow do
     origins ''*''
     resource ''/embed.js'', :headers => :any, :methods => [:get, :post, :options] #-> I believe resource needs to be a specific URL - will have to check this
  end
end