0

Estoy desarrollando un proyecto para visualizar una serie de fotos en 360º.

El producto final es un visor. (No es mas que una pagina web HTML,JS,CSS) que solicitan dados a PHP médiate Json

Dichos visores los insertamos a paginas web de nuestros clientes mediante un iframe (tambien he probado con <embed>)

<iframe src="https://orbitvu.co/share/umfMRU9aUdxC9NvT9uneUe/200261/orbittour/view" frameborder="0"></iframe>

Esto hace que el estilo del iframe dependa del css de la pagina padre, sin contar que algunas webs no permiten iframes. tampoco permite hacer seguimiento mediante Google Analytics, etc.

Adicionalmente he probado con la función Load de JQuery pero salta la politica CORS

<div id="homePage"></div>

$(document).ready(function () { 
        $('#homePage').load('//orbitvu.co/share/umfMRU9aUdxC9NvT9uneUe/200261/orbittour/view');             
});

He encontrado un ejemplo. una empresa que utilizan un cdn. implementan un div con un id y una clase css e importan un documento script con jsonp en la pagina padre. (No tengo ni idea de como lo hacen, pero funciona)

<div id="orbittour-umfMRU9aUdxC9NvT9uneUe" class="orbittour-container">

</div>


<script type="text/javascript" src="//orbitvu.co/share/umfMRU9aUdxC9NvT9uneUe/200261/orbittour/script"></script>

alguien tiene experiencia en este campo ?

2
  • 1
    Lo que harías con jsonp es hacer lo que hace googleMaps por ejemplo, que el "cliente" cargue un javascript remoto.
    – Emeeus
    Commented el 26 jul. 2022 a las 23:32
  • 1
    Al estar el script en el cliente, puede acceder al html. Por eso te dicen, pon un div con cierto id específico. De cualquier manera esto no escapa al problema del css del cliente.
    – Emeeus
    Commented el 26 jul. 2022 a las 23:42

1 respuesta 1

1

Al final lo he resuelto

Primero el cliente debe agregar un div con un id unico lo gestionas tu y luego debes pasar dicho id a un script cuyo atributo src sea un documento php. obiamente la salida de ese documento sera un ´.js´ valido.

paso 1 (lo dicho este codigo deberia agregar el cliente)

id unico eyJ0eXAiOiJKV1QiLCJhbGciOiJI

<div class="test-embed" id="eyJ0eXAiOiJKV1QiLCJhbGciOiJI" style="width: 100%; aspect-ratio: 16 / 9;"></div>
<script src="https://dominio.com/embed/index.php?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJI&capa=1" ></script>

Paso 2 : En php leemos la plantilla js con la que vamos a responder

<?php

//leemos el documento js  que luego vamos a imprimir

$plantilla =  file_get_content("resp.js");

//hacemos sustituciones o cosas   antes de imprimir


header('Access-Control-Allow-Origin: *');
header('Content-Type: application/javascript');
echo $plantilla; 


?>

Paso 3 : esta es la plantilla

//inyectamos el CSS en el body
var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute(
  "href",
  "https://TAG_DOMINIO_VALUE/css/ruta-printer.css"
);
document.getElementsByTagName("head")[0].appendChild(element);

//pintamos el visor en el div
var tacktilcontainer = document.getElementById("TAG_TOKEN_VALUE");

tacktilcontainer.innerHTML = `
<!--INICIO_PLANTILLA-->
    <!--href="/plantillas/embed/index.htm"
<!--FIN_PLANTILLA-->
`;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.