webdevRefinery Forum: Injecting stylesheet into an iFrame - webdevRefinery Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Rate Topic: -----

User is offline arronhunt 

  • I'm a httpster
  • Group: Moderators
  • Posts: 3398
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 11 April 2012 - 06:20 PM (#1)

Injecting stylesheet into an iFrame


Spoiler


Ran from local host and am no longer getting the error (duh). But it still isn't working.

I figured it out. Kind of. For some reason it is only attaching it to my last iframe though. It skips everything else in the array and only injects it into the last iframe?

<script type="text/javascript">
		function injectStyle(name){
			cssLink = document.createElement("link") 
			cssLink.href = "http://localhost/~arronhunt/idethemes/themes/"+name+".css"; 
			cssLink.rel = "stylesheet"; 
			cssLink.type = "text/css"; 
			
			// Grabs all the iframes on the page
			frames = document.getElementsByTagName('iframe');
			
			var theFrame
			for(var i in frames){
				// Sometimes i returns 'length'. WTF
				if(i == 'length'){ return }
				// Assigns a variable to the iFrames document
				theFrame = frames[i].contentWindow.document;				
				// Cleans out anything in the <head> of the iframe
				theFrame.getElementsByTagName('head')[0].innerHTML='';
				// Injects the CSS
				theFrame.getElementsByTagName('head')[0].appendChild(cssLink);
				// Log them so I can see if it failed.
				console.log(theFrame);		
			}			
		}
</script>

DO NOT OPEN THIS

Spoiler
0


User is offline Lemon 

  • I have a dream...
  • Group: Members
  • Posts: 688
  • Joined: 24-February 11
  • Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL

Posted 11 April 2012 - 06:30 PM (#2)

I doubt that you can attach an element created in one DOM tree to another tree within the iframe. Assuming all the origin stuff checks out, try something like this maybe:
<script type="text/javascript">  
                var theframedoc = document.getElementById('html').contentWindow.document;
                var cssLink = theframedoc.createElement("link") 
                cssLink.href = "themes/candybar.css"; 
                cssLink.rel = "stylesheet"; 
                cssLink.type = "text/css"; 
                theframedoc.body.appendChild(cssLink);
</script>

Posted Image
In the end, it's not the years in your life that count. It's the life in your years
0


User is offline arronhunt 

  • I'm a httpster
  • Group: Moderators
  • Posts: 3398
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 11 April 2012 - 07:11 PM (#3)

Thanks lemon. I got it to work, see above update.
DO NOT OPEN THIS

Spoiler
0


User is offline Lemon 

  • I have a dream...
  • Group: Members
  • Posts: 688
  • Joined: 24-February 11
  • Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL

Posted 11 April 2012 - 07:17 PM (#4)

How did this even what the heck...the server told me that post got rejected because the thread was hidden? Someone's stealing my packets or a new IPB feature :huh:
Posted Image
In the end, it's not the years in your life that count. It's the life in your years
0


User is offline NeilHanlon 

  • Group: Members
  • Posts: 884
  • Joined: 08-July 10
  • LocationRowley, Massachusetts
  • Expertise:HTML,CSS,PHP,Java,Graphics

Posted 11 April 2012 - 07:19 PM (#5)

I'm going to guess all the times you're returning because i is length is when it's skipping over..

Try something like:

for(var i=0;i < frames.length;i++){

}

Thanks,
兄ニール

Website | Blog | @NeilHanlon | About.Me | Facebook | LinkedIn
0


User is offline Lemon 

  • I have a dream...
  • Group: Members
  • Posts: 688
  • Joined: 24-February 11
  • Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL

Posted 11 April 2012 - 07:26 PM (#6)

Above is the correct adaptation. Essentially, don't use for...in on an array or nodelist, it's meant for use on objects to enumerate the properties/methods rather than the contents of arrays. This means when you try to use it with an array you'll get all the properties that make up the array object too such as 'length' and probably 'prototype' as well.

Edit: This page covers this well: http://stackoverflow...-in-with-arrays

If you are targeting modern browsers only you also have the option of the Array.forEach method. If not, you could always make use of a shim to add it to older browsers.
Posted Image
In the end, it's not the years in your life that count. It's the life in your years
0


User is offline NeilHanlon 

  • Group: Members
  • Posts: 884
  • Joined: 08-July 10
  • LocationRowley, Massachusetts
  • Expertise:HTML,CSS,PHP,Java,Graphics

Posted 11 April 2012 - 07:32 PM (#7)

Also, I just tried a little test, and I'm getting some XSS errors from Chrome.

and some other stuff:

Uncaught TypeError: Cannot call method 'getElementsByTagName' of undefined


Unsafe JavaScript attempt to access frame with URL http://brickcomputers.com/ from frame with URL http://fiddle.jshell.net/NeilHanlon/jwLpV/1/show/
. Domains, protocols and ports must match.


Refused to display document because display forbidden by X-Frame-Options.

Thanks,
兄ニール

Website | Blog | @NeilHanlon | About.Me | Facebook | LinkedIn
0


User is offline Lemon 

  • I have a dream...
  • Group: Members
  • Posts: 688
  • Joined: 24-February 11
  • Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL

Posted 11 April 2012 - 07:57 PM (#8)

View PostNeilHanlon, on 11 April 2012 - 07:32 PM, said:

Also, I just tried a little test, and I'm getting some XSS errors from Chrome.

and some other stuff:

Uncaught TypeError: Cannot call method 'getElementsByTagName' of undefined


Unsafe JavaScript attempt to access frame with URL http://brickcomputers.com/ from frame with URL http://fiddle.jshell.net/NeilHanlon/jwLpV/1/show/
. Domains, protocols and ports must match.


Refused to display document because display forbidden by X-Frame-Options.


The origin of the frame has to be identical to the origin of the parent page or else all access attempts will be refused unless the frame page specifically consents to access. Otherwise you'd be able to do all sorts of evil things like session stealing.
Posted Image
In the end, it's not the years in your life that count. It's the life in your years
0


User is offline arronhunt 

  • I'm a httpster
  • Group: Moderators
  • Posts: 3398
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 11 April 2012 - 08:13 PM (#9)

My page and iframe are the same domain so I'm not getting any XSS problems. The script is properly injecting the CSS, but it is only doing it to the last node in the array. I'm guessing it's a problem with how I'm looping. I'll try a while loop instead
DO NOT OPEN THIS

Spoiler
0


Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users


Enter your sign in name and password


Sign in options
  Or sign in with these services