SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding styles to a (same domain) iframe not working in IE 8/7

    Hi,

    I'm displaying 2 iframes on a page with content from other pages on the same domain. I'm using jQuery to apply a stylesheet to the 2 iframes by appending it to the head.

    Code JavaScript:
    $('#col1iframe, #col2iframe').load(function(){
     $(this.contentDocument).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
     $(this.contentDocument).find('a').attr({"target":"_top"});
     $('#col1iframe, #col2iframe').show();
    });

    It works great in FF, Chrome etc with no errors. IE 8 and 7 just show the un-styled iframe (IE9 is fine).

    Any ideas?

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try
    Code:
    this.contentWindow.document
    or
    Code:
    this.contentWindow.document.documentElement
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, apologies for the delay!!

    Neither of these worked.

    This is a list of things I have tried so far...

    Code JavaScript:
    $('#col1iframe, #col2iframe').load(function(){
    	$(this.contentDocument).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
    	$(this.contentDocument).find('a').attr({"target":"_top"});
    	$('#col1iframe, #col2iframe').show();
    });
     
    $('#col1iframe, #col2iframe').load(function(){
    	$(this.contentWindow.document).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
    	$(this.contentWindow.document).find('a').attr({"target":"_top"});
    	$('#col1iframe, #col2iframe').show();
    });
     
    $('#col1iframe, #col2iframe').load(function(){
    	$("#col1iframe, #col2iframe").contents().find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
    		$("#col1iframe, #col2iframe").contents().find('a').attr({"target":"_top"});
    	$(this).show();
    });
     
    $('#col1iframe, #col2iframe').load(function(){
    	$(this.contentWindow.document.documentElement).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
    	$(this.contentWindow.document.documentElement).find('a').attr({"target":"_top"});
    	$(this).show();
    });
     
    // this one doesn't work in anything...
     
    $('#col1iframe, #col2iframe').load(function(){
    	$(this.document).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
    	$(this.document).find('a').attr({"target":"_top"});
    	$('#col1iframe, #col2iframe').show();
    });

    Many thanks

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is what I am working on...

    http://staging.theblackhole.co.uk/ar...est/index.html

    If you look in IE 6-8 it shows the un-styled page

    Here is the location of the script file

    http://staging.theblackhole.co.uk/ar...t/js/script.js

    Cheers


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •