Solved

Need the content of an iframe to use the parent stylesheet

Posted on 2006-06-16
8
997 Views
Last Modified: 2012-06-21
OK, I have a page served from a content management system that embeds output from
my JSP app server using an iframe.

I want the JSP generated page to use the same stylesheet as the parent page.

Parent code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Job Alley - Search</title>
<meta name="description" content="Joomla - the dynamic portal engine and content management system" />
<meta name="keywords" content="Joomla, joomla" />
<meta name="Generator" content="Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved." />
<meta name="robots" content="index, follow" />
      <link rel="shortcut icon" href="http://192.168.1.2/images/favicon.ico" />
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link id="orbitcss" href="http://192.168.1.2/templates/rt_versatility/css/template_css.css" rel="stylesheet" type="text/css" />
<link href="http://192.168.1.2/templates/rt_versatility/css/header_light.css" rel="stylesheet" type="text/css" />
<link href="http://192.168.1.2/templates/rt_versatility/css/toolbar_blue.css" rel="stylesheet" type="text/css" />
<link href="http://192.168.1.2/templates/rt_versatility/css/footer_blue.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]>
<link id="orbitcss" href="http://192.168.1.2/templates/rt_versatility/css/template_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link rel="shortcut icon" href="http://192.168.1.2/images/favicon.ico" />
</head>
<body id="page_bg" class="w-wide f-default header-light toolbar-blue footer-blue">
      <div id="header">
            <div class="wrapper">
                  <div id="access">
                        <div id="selectors">
                              <span class="font-selector">&nbsp;</span>
                              <span class="width-selector">&nbsp;</span>
                        </div>

                        <div id="buttons">
                              <a href="http://192.168.1.2/templates/rt_versatility/rt_styleswitcher.php?widthstyle=w-fluid" title="Fluid width" class="fluid"><span class="button">&nbsp;</span></a>
                              <a href="http://192.168.1.2/templates/rt_versatility/rt_styleswitcher.php?widthstyle=w-wide" title="Wide width" class="wide"><span class="button">&nbsp;</span></a>
                              <a href="http://192.168.1.2/templates/rt_versatility/rt_styleswitcher.php?widthstyle=w-thin" title="Narrow width" class="thin"><span class="button">&nbsp;</span></a>
                              <a href="http://192.168.1.2/templates/rt_versatility/rt_styleswitcher.php?fontstyle=f-larger" title="Increase size" class="lrg"><span class="button">&nbsp;</span></a>
                              <a href="http://192.168.1.2/templates/rt_versatility/rt_styleswitcher.php?fontstyle=f-default" title="Default size" class="med"><span class="button">&nbsp;</span></a>
                              <a href="http://192.168.1.2/templates/rt_versatility/rt_styleswitcher.php?fontstyle=f-smaller" title="Decrease size" class="sml"><span class="button">&nbsp;</span></a>
                        </div>
                  </div>

                  <a href="http://192.168.1.2" title=""><span id="logo">&nbsp;</span></a>
                  <div id="top">
                                          </div>
            </div>
      </div>
      <div id="toolbar">
            <div class="wrapper">
                  <div id="nav">
                        <ul id="mainlevel"><li class="red"><a href="http://192.168.1.2/index.php?option=com_frontpage&Itemid=1">Home</a></li>

<li class="red"><a href="http://192.168.1.2/index.php?option=com_content&task=section&id=1&Itemid=2">News</a></li>
<li class="red"><a href="http://192.168.1.2/index.php?option=com_weblinks&Itemid=23">Links</a></li>
<li class="red"><a href="http://192.168.1.2/index.php?option=com_contact&Itemid=3">Contact Us</a></li>
<li class="active_menu"><a href="http://192.168.1.2/index.php?option=com_wrapper&Itemid=28">Search</a></li>
</ul>                  </div>
            </div>
      </div>
            <div id="mainbody">
            <div class="wrapper">

                  <div id="mainbody-2">
                        <div id="mainbody-3">
                              <div id="mainbody-4">
                                    <div id="mainbody-5">
                                    
                                          <div id="mainbody-padding">
                                                <table class="mainbody" cellspacing="0">
                                                      <tr valign="top">
                                                                                                                        <td class="left">
                                                                                                                                                                                                                                                                                    <div class="moduletable">

                  
            </div>
                                                                        </td>
                                                                                                                        <td class="mainbody">
                                                                                                                                    <div class="padding">
                                                                        <span class="pathway"><a href="http://192.168.1.2/index.php" class="pathway">Home</a> <img src="http://192.168.1.2/templates/rt_versatility/images/arrow.png" border="0" alt="arrow" />   Search </span>                                                                                    <script language="javascript" type="text/javascript">
            function iFrameHeight() {
                  var h = 0;
                  if ( !document.all ) {
                        h = document.getElementById('blockrandom').contentDocument.height;
                        document.getElementById('blockrandom').style.height = h + 60 + 'px';
                  } else if( document.all ) {
                        h = document.frames('blockrandom').document.body.scrollHeight;
                        document.all.blockrandom.style.height = h + 20 + 'px';
                  }
            }
            </script>

            <div class="contentpane">

                              <div class="componentheading">
                  Search                  </div>
                              <iframe
                        id="blockrandom"
            name="iframe"
            src="http://192.168.1.3/appl/branded/JA/searchform.jsp"
            width="100%"
            height="500"
            scrolling="auto"
            align="top"
            frameborder="0"
            class="wrapper">
            This option will not work correctly.  Unfortunately, your browser does not support Inline Frames            </iframe>

            </div>
                              <div class="back_button">

                  <a href='javascript:history.go(-1)'>
                  [ Back ]                  </a>
                  </div>
                                                                                          <div id="inset">
                                                                                                                                                      </div>
                                                                  </div>
                                                            </td>
                                                                                                                  </tr>

                                                </table>
                                          </div>                                          
                                    </div>
                              </div>
                        </div>
                  </div>
            </div>
      </div>
      
</body>

</html>

Embeded iframe code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Search</title>
<script language="JavaScript">
str=top.document.getElementById('orbitcss').href;
document.write('<link id="orbitcss" rel="stylesheet" type="text/css" href="'+str+'">');
alert(str);
</script>
</head>
<body bgcolor="#ffffff">

<div class="moduletable">
<script language="JavaScript">
str=top.document.getElementById('orbitcss').href;
alert(str);
</script>
<form action="http://192.168.1.3/appl/branded/JA/branded/JA/searchresults.jsp" method="post" name="login" >
            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>

            <td>

                  <label for="mod_login_username">Username</label>
                  <br />
                  <input name="username" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" />
                  <br />
                  <label for="mod_login_password">Password</label>
                  <br />

                  <input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" />
                  <br />
                  <input type="checkbox" name="remember" id="mod_login_remember" class="inputbox" value="yes" alt="Remember Me" />
                  <label for="mod_login_remember">
                        Remember me                  </label>
                  <br />
                  <input type="hidden" name="option" value="login" />
                  <input type="submit" name="Submit" class="button" value="Login" />

            </td>
      </tr>
      </table>
</div>
</body>
</html>

Current result, the browser (firefox & internet explorer) show no formatting, and no javascript alerts are fired at all.

Help please.

0
Comment
Question by:martinlt-1000
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
8 Comments
 
LVL 15

Accepted Solution

by:
Thogek earned 250 total points
ID: 16921686
Have you tried including the same <link /> elements present in your first page into your second page?
0
 

Author Comment

by:martinlt-1000
ID: 16922250
The problem is, the first page stylesheet is selectable by the user (via the CMS). Therefore, I need the second page to dynamically figure out the stylesheet in use and use that.
0
 
LVL 15

Expert Comment

by:Thogek
ID: 16925213
Can the first page, when it writes out the IFrame element that calls on the second page, include a dynamic querystring parameter in the second page's URL that tells it what CSS file(s) to include?
0
 
LVL 10

Assisted Solution

by:Khanh Doan
Khanh Doan earned 250 total points
ID: 16929178
I think the best way is use cookie, so if use config CSS first time, it will write to cookie. And then, everytime user visit your page, they don't need to config it again. And if they want to change CSS, cookie will be updated.
I don't know how to make a cookie via javascript. I just know in PHP :p
Goodluck.
Bonmat86.
0
 
LVL 15

Expert Comment

by:Thogek
ID: 17148899
I think I couple of good suggestions were made (either bonmat86's or mine might have worked), but the Asker never responded to them...
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question