Skip to content
Advertisement

iframe js issues

I’m new to web development and js. I understand some js and jQuery, but not enough to write useful code yet, so I’m hoping to get help here. I’m incorporating some 3rd party web apps into my website via an iFrame (out of pop-up windows and direct links, this is the best way) and have a two part question.

1) The web apps do not allow for direct coding and only allow for a limited number of css styling options. I can upload a background image and change the background color, but I can’t make it transparent. I want to adjust the iframe so my website background shows through. According to Firebug, I can simply take the background color option out entirely and the problem is solved.

The issue is that these apps are on a different domain causing cross-domain issues and I imagine most of the code is server side using a Dynamic View Controller (over my head), so incorporating the code into my site directly would probably not work. My “IT Guy” says that we should be able to target the iframe in my .php file and change the styling once the iframe is loaded, since the styles cascade. However, the iframe, as well as everything else on the page, is not named (no classes or ids), so in order to target it, I have to use some sort of (“this”).child.child(“body”) kind of thing. Nothing we have tried has worked so far. If I can target the iframe, I can change other minor issues like buttons that don’t display correctly.

2) If I set an iframe height and the iframe displays things longer than the height, it cuts off (obviously). I need the iframe to have a dynamic height, so if the contents of the iframe change, the height of the iframe changes as well. I have seen snippets of code to do this, but I had no idea what I was doing and surprisingly it didn’t work. I’m hoping to learn a little js magic if this works.

The test page is located at http://www.nightaliveent.com/builds/1.0/music.php. I can provide my current code if it would help, but I don’t want to pollute the board. For reference, the web apps are DJ Intelligence tools, specifically (http://www.djintelligence.com/music).

Thanks for any and all help. Every bit helps, and if I can’t get this to work, I will have to discontinue use of the web tools.

Advertisement

Answer

You can only ‘access’ content in an iframe when it used on the same domain (security), to try to access it from another domain will never work. Also, it’s better not to use iframe (depreciated), use object instead. For some IE versions, you need an iframe because IE is not W3C compliant.

What you can do if you want to load content PARTS from another site is to use ajax and after retrieving the page filter out the content you want. Refer to the jQuery.ajax function and you can define success and error callbacks. For example:

$.ajax({
   async:true,
   cache:true,
   url: 'your url',
   success:function(s) { alert('the string is: '+s); <filter contents and set target> },
   error:function() { alert('failed'); }
});

Hopes it helps.

Advertisement