html - maximizar - Como aplicar CSS ao iframe?




maximizar iframe (18)

A melhor maneira pode ser a seguinte (se você controlar o site de destino):

1) defina o link iframe com o parâmetro style , como:

http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D

(a última frase é a{color:red} codificada por urlencode .

2) defina a página de target.php assim:

<head>
..........
<style><? echo urldecode($_GET['style']);?> </style>
..........

Eu tenho uma página simples que tem algumas seções de iframe (para exibir links RSS). Como posso aplicar o mesmo formato CSS da página principal à página exibida no iframe?


Acho que a maneira mais fácil é adicionar outro div, no mesmo lugar que o iframe,

Torne seu z-index maior que o contêiner iframe, para que você possa simplesmente estilizar sua própria div. Se você precisar clicar, use apenas pointer-events:none no seu próprio div, então o iframe estaria funcionando caso você precise clicar nele;)

Espero que ajude alguém;)


Aqui, existem duas coisas dentro do domínio

  1. Seção iFrame
  2. Página carregada dentro do iFrame

Então você quer estilizar essas duas seções da seguinte forma,

1. Estilo para a seção iFrame

Pode estilizar usando CSS com esse id respeitado ou nome de class . Você pode simplesmente estilizá-lo em suas folhas de estilo pai também.

<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. Estilize a página carregada dentro do iFrame

Este Styles pode ser carregado a partir da página pai com a ajuda do Javascript

var cssFile  = document.createElement("link") 
cssFile.rel  = "stylesheet"; 
cssFile.type = "text/css"; 
cssFile.href = "iFramePage.css"; 

em seguida, defina esse arquivo CSS para a respeitada seção iFrame

//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);

Aqui, você pode editar a parte principal da página dentro do iFrame usando esse caminho também

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath, 
      type: "text/css" }
     ));

Bem, eu segui estes passos:

  1. Div com uma classe para manter o iframe
  2. Adicione iframe ao div .
  3. No arquivo CSS,
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

Isso funciona no IE 6. Deve funcionar em outros navegadores, verifique!


Como alternativa, você pode usar a tecnologia CSS-in-JS, como abaixo de lib:

https://github.com/cssobj/cssobj

Pode injetar o objeto JS como CSS no iframe, dinamicamente


Eu encontrei esse problema com o Google Agenda . Eu queria estilizá-lo em um fundo mais escuro e mudar de fonte.

Felizmente, a URL do código de incorporação não tinha restrição de acesso direto, portanto, usando a função PHP file_get_contents , é possível obter todo o conteúdo da página. Em vez de chamar o URL do Google, é possível chamar um arquivo php localizado no seu servidor, ex. google.php , que conterá o conteúdo original com modificações:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

Adicionando o caminho para sua folha de estilo:

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

(Isso colocará sua folha de estilo por último antes da tag de fim de head .)

Especifique o URL base do url original no caso de css e js serem chamados relativamente:

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

O arquivo final do google.php deve ficar assim:

<?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;

Em seguida, você altera o código de incorporação de iframe para:

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Boa sorte!


Existe um script maravilhoso que substitui um nó por uma versão iframe de si mesmo. CodePen Demo

Exemplos 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">'
});

Expandindo a solução jQuery acima para lidar com quaisquer atrasos no carregamento do conteúdo do quadro.

$('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();
});

O acima com uma pequena mudança 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 bem com ff3 e ie8 pelo menos


O seguinte funcionou para mim.

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();

Podemos inserir tags de estilo no iframe. Postado também aqui ...

<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>

Quando você diz "doc.open ()", significa que você pode escrever qualquer tag HTML dentro do iframe, então você deve escrever todas as tags básicas para a página HTML e se você quiser ter um link CSS no seu iframe, basta escrever um iframe com link CSS nele. Eu te dou um exemplo:

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();

Se você controlar a página no iframe, como disse o hangy, a abordagem mais fácil é criar um arquivo CSS compartilhado com estilos comuns e, em seguida, apenas vinculá-lo a partir de suas páginas html.

Caso contrário, é improvável que você possa alterar dinamicamente o estilo de uma página de uma página externa em seu iframe. Isso ocorre porque os navegadores reforçaram a segurança dos scripts de cross frame dom devido ao possível uso indevido de spoofing e outros hacks.

Este tutorial pode fornecer mais informações sobre o script de iframes em geral. Sobre cross frame scripting explica as restrições de segurança da perspectiva do IE.


Se você quiser reutilizar CSS e JavaScript da página principal, talvez deva considerar substituir <IFRAME> por um conteúdo carregado Ajax. Este é mais SEO amigável agora, quando os robôs de busca são capazes de executar JavaScript.

Este é um exemplo de jQuery que inclui outra página html no seu documento. Isso é muito mais SEO do que iframe . Para ter certeza de que os bots não estão indexando a página incluída, basta adicioná-la para não permitir o uso de 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>

Você também pode incluir o jQuery diretamente do Google: http://code.google.com/apis/ajaxlibs/documentation/ - isso significa a inclusão automática opcional de versões mais recentes e um aumento significativo de velocidade. Além disso, significa que você precisa confiar neles para entregar apenas o jQuery;)


Você não poderá estilizar o conteúdo do iframe dessa maneira. Minha sugestão seria usar o script serverside (PHP, ASP ou um script Perl) ou encontrar um serviço online que irá converter um feed em código JavaScript. A única outra maneira de fazer isso seria se você pudesse fazer uma inclusão no servidor.


use pode tentar isso:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });

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"
}));






iframe