0

I've got a iFrame on my page which is coming in from an external source and when the iFrame is loaded it's coming in with it's 'own' styling classes and I'm trying to remove one of the classes what it has. So when the iFrame loads the HTML looks like this:

<iframe style="background-color:#fff !important" id="myFrame" src="http://salonspy.co.uk/widget?i=72108" frameborder="0" height="270" width="320">
#document
    <html> <!---THIS IS THE TAG I'M TRYING TO GET A HANDLE ON!-->
        <head>...</body>
        <body>...</body>
    </html>
</iframe>

The html tag has a background color applied to it (by the external css) and I'm trying to remove this background-color (or apply a transparent one) but I can't seem to get 'hold' of this tag.

I've got some jQuery that waiting for the iFrame to load but I don't know what to enter to apply this new style.

$(function() {
$("#myFrame").bind("load",function(){
    //$(this).contents().find("[tokenid=" + token + "]").html();
    alert("iFrame loaded");
    //$(this).contents().find("html").css("background-color","white");
    var src = $('#myFrame>html').html();
    alert(src);
});
});

Could someone assist please?

Thanks.

SxChoc
  • 619
  • 3
  • 10
  • 26
  • 1
    You say it's from an `external source` (salonspy.co.uk from what I can tell). If the iframe is being hosted outside of salonspy.co.uk, you may run into an issue with [same-origin policy](https://en.wikipedia.org/wiki/Same-origin_policy). See [this accepted answer](http://stackoverflow.com/a/364997/6697953). – Cory J. Sep 06 '16 at 14:51
  • 1
    Possible duplicate of [jQuery/JavaScript: accessing contents of an iframe](http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe) – Cory J. Sep 06 '16 at 14:52
  • That tells me how to get a named element but not the generic HTML tag – SxChoc Sep 06 '16 at 15:06
  • Well my concern is that you're accessing outside of the domain it's hosted in -- if that's the case, your request is impossible. If it's within the domain, you may try `document.getElementById('myFrame').contentWindow.document.body.innerHTML` or jQuery: `$('#myFrame').contents().find("html").html();` – Cory J. Sep 06 '16 at 15:09
  • Possible duplicate of [How to apply CSS to iframe?](http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) – henry Sep 06 '16 at 15:32

1 Answers1

0

Moving from comment to answer.

If you are accessing salonspy.co.uk from within the same origin, you may access the HTML contents by calling the inner HTML:

Plain JavaScript

document.getElementById('myFrame').contentWindow.document.bo‌​dy.innerHTML

jQuery

$('#myFrame').contents().find("html").html();
Cory J.
  • 392
  • 2
  • 8