2

¿Sabéis si es posible aplicar estilos CSS -o al menos modificar algo más que el tamaño- a las listas de Spotify que embebes en tu web?

<iframe id="lista-spotify" src="<?=$enlace_spotify?>" width="450" height="840" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Si en mi hoja de estilos le intento cambiar el color de fondo:

#lista-spotify {
    background-color: pink;
}

La lista sigue saliendo con el color que buenamente Spotify quiere; para este ejemplo, rojo:

introducir la descripción de la imagen aquí

Tengo una lista por año, de 1960 a 2009, y querría que, si no se puede alterar su CSS, al menos salieran todas siempre con el mismo color: según el año -no sé si con algún criterio o aleatoriamente- salen de color rojo, marrón, verde, azul, gris, negro...

Un saludo y gracias por adelantado.

2 respuestas 2

4

Leída tu pregunta, la respuesta corta es NO

Simplemente no puedes modificar los estilos que tenga un <iframe>, si no es de tu mismo dominio, no podrás acceder al DOM contenido en el <iframe> debido a motivos de seguridad (CORS):

Uncaught SecurityError: Blocked a frame with origin \"null\" from accessing a cross-origin frame

document.querySelector("iframe").contentWindow.document
<iframe src="//wikipedia.com"></iframe>

En resumen, CORS es una política de compartimiento de archivos entre distintos orígenes, esta bloqueará las peticiones que no tenga en "la lista blanca", para averiguar si estamos autorizados a hacer una petición desde un dominio a hasta un dominio b, el navegador hace una petición primero de tipo OPTIONS de manera si el origen no está en la lista de orígenes admitidos del destino, la petición será bloqueada

Sin embargo, puedes hacer algo más práctico:

Ya que tienes la URL del <iframe> puedes hacer un file_get_contents

print file_get_contents($enlace_spotify);

Podremos obtener la página completa, pero si tiene algún tipo de lenguaje de backend en la página no lo podremos obtener como entenderás por motivos de seguridad

Con esto podrás inspeccionar el DOM obtenido y modificarlo a tu gusto.

2

No amigo, no puedes, precisamente porque es un iframe, es un elemento externo que traes a tu pagina o sitio web, no comparten el mismo dominio. Si por alguna razon, se pudiera modificar seria un problema inmenso de seguridad para la pagina de donde traes el iframe, ya que todo su contenido web (html,css,js.etc) esta alojado en un servidor.

Tu Respuesta

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

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