Accéder à une image dans une image

Ok, voici la situation. J'ai un site auquel je suis abonné qui vous permet d'ajouter votre propre code, etc. Ils ont un éditeur de forum que je suis incapable d'adapter à mon site, donc je voudrais juste changer les couleurs du cadre le plus interne (doc3 dans l'exemple ci-dessous).Accéder à une image dans une image

Voici la configuration de base ... oui, tous les documents proviennent du même domaine mais je peux seulement ajouter du code au document principal. Le cadre doc3 est créé dynamiquement. La première image a une classe mais pas de nom, la seconde seulement a un identifiant ... Je ne sais pas si la liaison fonctionne pour le cadre interne, mais firebug ne me donne pas d'erreur.

Oh, et j'ai essayé d'injecter une feuille de style sans succès.

Document principal (avec mes tentatives de doc3 accès)

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('iframe').bind('load', function(){ 
    $(this).contents().find('body').css({'background-color':'#333333','color':'#ddd'}); // This does change doc2 colors 
    $(this).contents().find('iframe#doc3').bind('load', function(){ 
    $(this).contents().find('body').css({'background-color':'#333333','color':'#ddd'}); // doesn't work :(
    }) 
}) 
}) 
</script> 
</head> 
<body> 
Document #1 
<iframe class="postFrame" src="doc2.htm" width="100%" height="300"> 
</body> 
</html>

doc2.htm

<html> 
<head> 
</head> 
<body> 
<form id="form1"> 
Document #2 
<iframe id="doc3" src="doc3.htm" width="100%" height="250"> 
</form> 
</body> 
</html>

doc3.htm

<html> 
<head> 
</head> 
<body style="background-color:#fff; color:#000;"> <!-- access this body style --> 
Document #3 
</body> 
</html>

J'espère que je l'ai fait assez clair. Toute aide ou un point dans la bonne direction serait grandement appréciée :)

Edit: mis à jour le document principal avec la suggestion de Wahnfrieden (! Merci), mais malheureusement je ne peux toujours pas à doc3.htm

Source

2009-08-24 Mottie

En supposant que vos iframes sont tous sur le même domaine donnent ce un coup:

$(function() { 
    $(window).load(function() { 
    var iframe2body = $('iframe').contents().find('body'); 
    iframe2body.css({ 'background-color': '#333333', 'color': '#ddd' }); // doc2 colors 
    iframe2body.contents('iframe').contents().find('body').css({ 'background-color': '#fff', 'color': '#ddd' }); // doc3 colors 
    }) 
})

Je ne l'ai pas enchaîner tous ensemble uniquement à des fins de lisibilité et pour IE je devais le changer à $(window).load(function() {

Source

2009-08-25 03:05:37 Colin

Merci Colin! Cela a fonctionné, mais j'ai dû changer la ligne doc3 ".contents ('iframe')" en ".find ('iframe')" ... iframe2body.find ('iframe'). Contents(). Find ('body'). css ({'background-color': '# 555', 'color': '# ddd'}); // doc3 colors – Mottie

Malheureusement, je viens de découvrir que doc3.htm charge un fichier CSS qui a un "! important" après la couleur de fond et la couleur du texte = (... je suppose que je vais devoir charger une feuille de style – Mottie

$('#iframeID').contents().find('#someID').html();

Source

2009-08-24 21:12:09 aehlke

Désolé je devrais avoir été plus clair, je veux obtenir au corps doc3.htm et ajouter un arrière-plan et couleur de texte – Mottie

Hey désolé, je ne voulais pas que ce soit une solution complète, juste un pointeur - il semble comme la partie .contents() est ce qui vous manquait. – aehlke

J'ai mis à jour le document principal avec du code qui peut accéder à doc2.htm, mais je n'arrive toujours pas à doc3.htm. +1 pour l'aide jusqu'à présent :) – Mottie

L'accès à l'objet document à l'aide de l'élément iframe peut être très problématique. Dans la plupart des cas, les navigateurs permettent au document incorporé d'accéder au contexte de la fenêtre parente, mais pas vice versa. Donc, dans doc2.htm ou celui que vous voulez contrôler, assignez votre objet document à la variable windows parent.

document principal:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    window.onIframeReady = function() { 
     setChildColor("#bbb"); 
    } 
</script> 
</head> 
<body> 
Document #1 
<iframe class="postFrame" src="doc2.htm" width="100%" height="300"> 
</body> 
</html>

doc3.html:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
    parent.parent.setChildColor = function (color) { 
     document.bgColor(color); 
    } 
    $(function() { 
     parent.parent.onIframeReady(); 
    }) 
</script> 
</head> 
<body style="background-color:#fff; color:#000;"> <!-- access this body style --> 
Document #3 
</body> 
</html>

Source

2009-08-25 00:14:07

Salut et merci pour la réponse ... le problème est que je n'ai pas le contrôle du contenu de doc2.htm ou doc3.htm. Je suppose que je pourrais injecter du code. – Mottie

Si la structure interne a un nom essayer

innerframeName.document.body.style.backgroundColor="#000000";

J'ai eu la structure interne bgcolor fixé par

type de style < = "text/css">

body {background: # cccccc;}

</style>

et était capable de le changer.

Source

2013-02-07 01:17:53 Stev

Accéder à une image dans une image

Répondre

Questions connexes