insertar - iframe video html
¿Cómo aplicar CSS a iframe? (26)
Tengo una página simple que tiene algunas secciones de iframe (para mostrar enlaces RSS). ¿Cómo puedo aplicar el mismo formato CSS desde la página principal a la página que se muestra en el iframe?
Ampliando la solución jQuery anterior para hacer frente a cualquier retraso en la carga del contenido del marco.
$(''iframe'').each(function(){
function injectCSS(){
$iframe.contents().find(''head'').append(
$(''<link/>'', { rel: ''stylesheet'', href: ''iframe.css'', type: ''text/css'' })
);
}
var $iframe = $(this);
$iframe.on(''load'', injectCSS);
injectCSS();
});
Aquí se explica cómo aplicar el código CSS directamente sin utilizar <link> para cargar una hoja de estilo adicional.
var head = jQuery("#iframe").contents().find("head");
var css = ''<style type="text/css">'' +
''#banner{display:none}; '' +
''</style>'';
jQuery(head).append(css);
Esto oculta el banner en la página de iframe. ¡Gracias por tus sugerencias!
Aquí, hay dos cosas dentro del dominio.
- Sección iFrame
- Página cargada dentro del iFrame
Así que quieres diseñar esas dos secciones de la siguiente manera,
1. Estilo para la sección iFrame
Se puede usar el estilo CSS con ese id o nombre de class respetado. También puedes peinarlo en las hojas de estilo de tus padres.
<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>
<iframe name=''iframe1'' id="my_iFrame" src="#" cellspacing="0"></iframe>
2. Estilo de la página cargada dentro del iFrame
Estos estilos se pueden cargar desde la página principal con la ayuda de Javascript
var cssFile = document.createElement("link")
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
cssLink.href = "iFramePage.css";
a continuación, establezca ese archivo CSS a la sección iFrame respetada
//to Load in the Body Part
frames[''my_iFrame''].document.body.appendChild(cssFile);
//to Load in the Head Part
frames[''my_iFrame''].document.head.appendChild(cssFile);
Aquí, puede editar la parte principal de la página dentro del iFrame de esta manera también
var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead .append(
$("<link/>",{
rel: "stylesheet",
href: urlPath ,
type: "text/css" }
));
Bueno, he seguido estos pasos:
- Div con una clase para sostener
iframe - Agrega
iframea ladiv. - En el archivo CSS,
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }
Esto funciona en IE 6. Debería funcionar en otros navegadores, compruebe!
Como alternativa, puedes usar la tecnología CSS-in-JS, como debajo de lib:
https://github.com/cssobj/cssobj
Puede inyectar objetos JS como CSS a iframe, dinámicamente.
Creo que la forma más fácil es agregar otro div, en el mismo lugar que el iframe, entonces
haga que su z-index más grande que el contenedor de iframe, para que pueda diseñar fácilmente su propia div. Si necesita hacer clic en él, solo use pointer-events:none en su propia división, por lo que el iframe funcionaría en caso de que necesite hacer clic en él;)
Espero que ayude a alguien;)
Cuando dices "doc.open ()" significa que puedes escribir cualquier etiqueta HTML dentro del iframe, por lo que deberías escribir todas las etiquetas básicas para la página HTML y si quieres tener un enlace CSS en tu encabezado del iframe, simplemente escribe un Iframe con enlace CSS en el mismo. Te doy un ejemplo:
doc.open();
doc.write(''<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="/css/print.css"/></head><body><table id="'' + gridId + ''Printable'' + ''" class="print" >'' + out + ''</table></body></html>'');
doc.close();
En caso de que tenga acceso a la página de iframe y quiera que se aplique un CSS diferente solo cuando lo cargue a través de iframe en su página, aquí encontré una solución para este tipo de cosas
Esto funciona incluso si iframe está cargando un dominio diferente
consultar sobre postMessage()
El plan es enviar el css a iframe como un mensaje como
iframenode.postMessage(''h2{color:red;}'',''*'');
* es enviar este mensaje independientemente del dominio en iframe
y reciba el mensaje en iframe y agregue el mensaje recibido (CSS) al encabezado del documento.
código para agregar en la página iframe
window.addEventListener(''message'',function(e){
if(e.data == ''send_user_details'')
document.head.appendChild(''<style>''+e.data+''</style>'');
});
Encontré otra solución para poner el estilo en el html principal como este
<style id="iframestyle">
html {
color: white;
background: black;
}
</style>
<style>
html {
color: initial;
background: initial;
}
iframe {
border: none;
}
</style>
y luego en iframe hacer esto (ver el js onload)
<iframe onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>
y en js
<script>
ifstyle = document.getElementById(''iframestyle'')
iframe = top.frames["log"];
</script>
Puede que no sea la mejor solución, y ciertamente se puede mejorar, pero es otra opción si desea mantener una etiqueta de "estilo" en la ventana principal
Hay un script maravilloso que reemplaza un nodo con una versión de iframe de sí mismo. CodePen Demo
Ejemplos de uso:
// Single node
var component = document.querySelector(''.component'');
var iframe = iframify(component);
// Collection of nodes
var components = document.querySelectorAll(''.component'');
var iframes = Array.prototype.map.call(components, function (component) {
return iframify(component, {});
});
// With options
var component = document.querySelector(''.component'');
var iframe = iframify(component, {
headExtra: ''<style>.component { color: red; }</style>'',
metaViewport: ''<meta name="viewport" content="width=device-width">''
});
La mayoría de los navegadores manejan universalmente un iframe como una página HTML diferente. Si desea aplicar la misma hoja de estilo al contenido del iframe, simplemente refiérase a las páginas que se usan allí.
La mejor manera puede ser la siguiente (si controla el sitio de destino):
1) establecer el enlace iframe con el parámetro de style , como:
http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D
(La última frase es a{color:red} codificado por la función urlencode .
2) establece el target.php página del receptor de esta manera:
<head>
..........
<style><? echo urldecode($_GET[''style'']);?> </style>
..........
Lo anterior con un pequeño cambio funciona:
var cssLink = document.createElement("link")
cssLink.href = "pFstylesEditor.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
//Instead of this
//frames[''frame1''].document.body.appendChild(cssLink);
//Do this
var doc=document.getElementById("edit").contentWindow.document;
//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();
//Then append child
doc.body.appendChild(cssLink);
Funciona bien con ff3 y ie8 al menos
Lo siguiente funcionó para mí.
var iframe = top.frames[name].document;
var css = '''' +
''<style type="text/css">'' +
''body{margin:0;padding:0;background:transparent}'' +
''</style>'';
iframe.open();
iframe.write(css);
iframe.close();
Me encontré con este problema con Google Calendar . Quería estilizarlo en un fondo más oscuro y cambiar la fuente.
Afortunadamente, la URL del código de inserción no tenía restricciones en el acceso directo, por lo que al usar la función PHP file_get_contents es posible obtener todo el contenido de la página. En lugar de llamar a la URL de Google, es posible llamar a un archivo php ubicado en su servidor, ej. google.php , que contendrá el contenido original con modificaciones:
$content = file_get_contents(''https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal'');
Agregando el camino a su hoja de estilo:
$content = str_replace(''</head>'',''<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>'', $content);
(Esto colocará la última hoja de estilo justo antes de la etiqueta de head ).
Especifique la url base desde la url original en caso de que se llame relativamente a css y js:
$content = str_replace(''</title>'',''</title><base href="https://www.google.com/calendar/" />'', $content);
El archivo final google.php debería verse así:
<?php
$content = file_get_contents(''https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal'');
$content = str_replace(''</title>'',''</title><base href="https://www.google.com/calendar/" />'', $content);
$content = str_replace(''</head>'',''<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>'', $content);
echo $content;
Luego cambia el código de incrustación de iframe a:
<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
¡Buena suerte!
Mi versión compacta :
<script type="text/javascript">
$(window).load(function () {
var frame = $(''iframe'').get(0);
if (frame != null) {
var frmHead = $(frame).contents().find(''head'');
if (frmHead != null) {
frmHead.append($(''style, link[rel=stylesheet]'').clone()); // clone existing css link
//frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
}
}
});
</script>
Sin embargo, a veces el iframe no está listo en la ventana cargada, por lo que es necesario utilizar un temporizador .
Código listo para usar (con temporizador):
<script type="text/javascript">
var frameListener;
$(window).load(function () {
frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
var frame = $(''iframe'').get(0);
if (frame != null) {
var frmHead = $(frame).contents().find(''head'');
if (frmHead != null) {
clearInterval(frameListener); // stop the listener
frmHead.append($(''style, link[rel=stylesheet]'').clone()); // clone existing css link
//frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
}
}
}
</script>
... y enlace jQuery:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
No podrá aplicar estilo al contenido del iframe de esta manera. Mi sugerencia sería utilizar scripts de servidor (PHP, ASP o un script de Perl) o encontrar un servicio en línea que convierta una fuente a código JavaScript. La única otra forma de hacerlo sería si puede incluir un servidor.
Otras respuestas aquí parecen usar los enlaces jQuery y CSS.
Este código utiliza JavaScript vainilla. Crea un nuevo elemento <style> . Establece el contenido de texto de ese elemento como una cadena que contiene el nuevo CSS. Y agrega ese elemento directamente a la cabeza del documento iframe.
var iframe = document.getElementById(''the-iframe'');
var style = document.createElement(''style'');
style.textContent =
''.some-class-name {'' +
'' some-style-name: some-value;'' +
''}''
;
iframe.contentDocument.head.appendChild(style);
Podemos insertar etiqueta de estilo en iframe. Publicado también aquí ...
<style type="text/css" id="cssID">
.className
{
background-color: red;
}
</style>
<iframe id="iFrameID"></iframe>
<script type="text/javascript">
$(function () {
$("#iFrameID").contents().find("head")[0].appendChild(cssID);
//Or $("#iFrameID").contents().find("head")[0].appendChild($(''#cssID'')[0]);
});
</script>
Si controla la página en el iframe, como dijo hangy, el método más sencillo es crear un archivo CSS compartido con estilos comunes, luego vincularlo desde sus páginas html.
De lo contrario, es poco probable que pueda cambiar dinámicamente el estilo de una página desde una página externa en su iframe. Esto se debe a que los navegadores han reforzado la seguridad en las secuencias de comandos de dominios de fotogramas cruzados debido a un posible uso indebido para suplantación de identidad y otros trucos.
Este tutorial puede proporcionarle más información sobre scripts de iframes en general. Acerca de los scripts entre marcos explica las restricciones de seguridad desde la perspectiva de IE.
Si desea reutilizar CSS y JavaScript desde la página principal, tal vez debería considerar reemplazar <IFRAME> con un contenido cargado de Ajax. Esto es más amigable para SEO ahora cuando los robots de búsqueda pueden ejecutar JavaScript.
Este es un ejemplo de jQuery que incluye otra página html en su documento. Esto es mucho más amigable para SEO que iframe . Para asegurarse de que los bots no están indexando la página incluida, solo agréguela para no permitir en robots.txt
<html>
<header>
<script src="/js/jquery.js" type="text/javascript"></script>
</header>
<body>
<div id=''include-from-outside''></div>
<script type=''text/javascript''>
$(''#include-from-outside'').load(''http://example.com/included.html'');
</script>
</body>
</html>
También puede incluir jQuery directamente desde Google: http://code.google.com/apis/ajaxlibs/documentation/ - esto significa inclusión automática opcional de versiones más recientes y un aumento significativo de la velocidad. Además, significa que debe confiar en ellos para que le entreguen solo el jQuery;)
Si el contenido del iframe no está completamente bajo su control o si desea acceder al contenido desde diferentes páginas con diferentes estilos, podría intentar manipularlo utilizando JavaScript.
var frm = frames[''frame''].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);
Tenga en cuenta que, según el navegador que utilice, es posible que solo funcione en las páginas servidas del mismo dominio.
uso puede probar esto:
$(''iframe'').load( function() {
$(''iframe'').contents().find("head")
.append($("<style type=''text/css''> .my-class{display:none;} </style>"));
});
Editar: Esto no funciona en varios dominios a menos que se establezca el encabezado CORS apropiado.
Hay dos cosas diferentes aquí: el estilo del bloque de iframe y el estilo de la página incrustada en el iframe. Puede configurar el estilo del bloque iframe de la manera habitual:
<iframe name="iframe1" id="iframe1" src="empty.htm"
frameborder="0" border="0" cellspacing="0"
style="border-style: none;width: 100%; height: 120px;"></iframe>
El estilo de la página incrustada en el iframe debe configurarse incluyéndolo en la página secundaria:
<link type="text/css" rel="Stylesheet" href="Style/simple.css" />
O se puede cargar desde la página principal con Javascript:
var cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames[''iframe1''].document.head.appendChild(cssLink);
var link1 = document.createElement(''link'');
link1.type = ''text/css'';
link1.rel = ''stylesheet'';
link1.href = "../../assets/css/normalize.css";
window.frames[''richTextField''].document.body.appendChild(link1);
var $head = $("#eFormIFrame").contents().find("head");
$head.append($("<link/>", {
rel: "stylesheet",
href: url,
type: "text/css"
}));