Estoy tratando de personalizar un widget de acceso fiduciario a criptográfico para poder sobrescribir el estilo actual por uno que coincida con mi aplicación de reacción.
Esta es una aplicación de reactjs, que usa material ui. Este widget existe en un iFrame.
Alguien ya logró hacerlo: https://app.rubic.exchange/buy-crypto?_ga=2.79437588.1459597697.1646699276-647485347.1645485242
Revisé su trabajo en la inspección, pero parece que no puedo replicarlo en mi aplicación de reacción.
He probado dos métodos:
MÉTODO UNO
Localización de contentWindow.document: desafortunadamente, esto no funcionó porque no hay ningún documento visible cuando se consulta:
function changeStuff() { const onramperWindow = onramper.contentWindow; console.log(onramperWindow) const onramperDocument = onramperWindow.document console.log(onramperDocument) }Esto da como resultado un error ya que el documento no parece estar disponible más que en el padre, que no es lo que estoy buscando para editar.
MÉTODO DOS
Como mi aplicación de reacción usa MUI, he intentado utilizar useStyles.
const useStyles = makeStyles({ embedContainer: { "& iframe": { position: "absolute", top: 0, left: 0, width: "50%", height: "100%", color: "#000000" } } });Seguido por el iframe:
<iframe id="onramper" src="https://widget.onramper.comcolor=346eeb&apiKey=pk_test_x5M_5fdXzn1fxK04seu0JgFjGsu7CH8lOvS9xZWzuSM0" height="595px" width="800px" title="Onramper widget" frameborder="no" allow="accelerometer; autoplay; camera; gyroscope; payment" className={classes.embedContainer} > <a href="https://widget.onramper.com" target="_blank">Buy crypto</a> </iframe>Sin embargo, al usar este método, toda la pantalla está en negro, ya que está inyectando el css en toda la página.
¿Alguien tiene alguna guía/consejos/tutoriales que pueda ver para personalizar el CSS en este widget de iframe?
Por defecto el navegador tiene un sistema de seguridad que encapsula los iframes impidiendo que se comuniquen entre sí y con tu página. No es posible eludir esto ni debería serlo.
Imagina que creas un fakebank.com con un iframe de bank.com. Seguimiento y obtención de información de los usuarios sin problemas.
Pero puede descargar el contenido del iframe e insertarlo en su página de esa manera tiene acceso completo.
ej: jquery:
$('#divframe').load( 'http://www.corsproxy.com/' + 'www.cptec.inpe.br/widget/widget.php?p=3819&w=h&c=474647&f=ffffff .tabtop', function() { $('#divframe').html( $('#divframe').html().replace(new RegExp('src="', 'g'),'src="http://www.cptec.inpe.br/widget/') ); });HTML:
<div id="divframe"></div>Alternativa con proxy propio en PHP:
proxy.php (solo con ese contenido y nada más)
<?php $cache_file = 'proxy_cache.html'; // name file to save cache if (!@file_exists($cache_file) || (time() - @filemtime($cache_file) > (60 * 60 * 6))) { // check cache expirated and try new request $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "http://www.cptec.inpe.br/widget/widget.php?p=3819&w=h&c=474647&f=ffffff"); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $retorno = str_replace('src="','src="http://www.cptec.inpe.br/widget/',curl_exec($ch)); // add full address in all src curl_close($ch); file_put_contents($cache_file, $retorno); // save content in file cache } else { // cache not expire, open file content wingthout new request $retorno = file_get_contents($cache_file); } echo $retorno; // print content ?>El contenido a continuación debe estar en otro archivo junto con el css y todo
jquery:
$('#divframe').load( 'proxy.php .tabtop', function() { $('#divframe .tab_content').hide(); $('#divframe .tabs li:first').addClass('active'); $('#divframe .tab_content:first').show(); $('#divframe .tabs li').click(function(){ $('#divframe .tabs li').removeClass('active'); $(this).addClass('active'); $('#divframe .tab_content').hide(); $($(this).children('a').attr('href')).show(); }); });HTML:
<div id="divframe"></div>Lo siento, mi inglés no es mi idioma nativo =D