Solved

how to build iframe url from javascript variable

Posted on 2010-08-12
10
509 Views
Last Modified: 2012-05-10
As shown in the code below, I'm using javascript date() to populate an iframe with a different page every day.

My javascript successfully produces var fday e.g. special_today/12.html  on the 12th of the month.

However, I can't get my syntax right inserting this into the iframe. For example I've tried   src = + fday +   and src=&fday.

BTW this iframe works fine when I hard code the url.
<script type="text/javascript">
<!--
var currentTime = new Date()
var day = currentTime.getDate()
var fday = 'special_today/' + day + '.html'
//-->
</script>
	<iframe id="feat1" src = + fday + width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10" style="visibility:hidden;" onload="document.getElementById('feat1').style.visibility = 'visible';"> 
              <p>Your browser does not support iframes.</p></iframe>

Open in new window

0
Comment
Question by:NEILPH
[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
  • 5
  • 3
  • 2
10 Comments
 
LVL 2

Expert Comment

by:GLoad
ID: 33425991
You cannot just build a string in html using javascript + like you are above. Also avoid the visibility approach that you might use for a div in an iframe.

Try using the window.load method. In your case the solution would be as follows...

<script type="text/javascript">

function load()
{
var currentTime = new Date()
var day = currentTime.getDate()
var fday = 'special_today/' + day + '.html'
document.getElementById('feat1').src = fday;
}
window.onload = load;
</script>

      <iframe id="feat1" width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10">
              <p>Your browser does not support iframes.</p></iframe>
0
 

Author Comment

by:NEILPH
ID: 33426281
Thanks. That works.

However, your avoidance of div\visibility in the iframe causes me a different problem.

My parent page and frames both have a "yellow" <body bgcolor="#ffcc00"> background.

If I don't use style="visibility:hidden;" onload="document.getElementById('feat1').style.visibility = 'visible';">  I get an ugly white space in the frame before the child page loads.

I've demonstrated this for you at http://www.newsknife.com/test.html The left frame uses your code.  The right frame uses the visibility routine.

If you look at our home page http://www.newsknife.com you'll see this will be a significant problem.

What's the problem using div\visibility?
0
 

Author Comment

by:NEILPH
ID: 33426283
I meant The top frame uses your code.  The bottom frame uses the visibility routine.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Expert Comment

by:GLoad
ID: 33426475
You can use the visibility as well if you like. Depends on how long the frame takes to load really. Just set the style sheet class change in the javascript load method when everything else is done.
0
 

Author Comment

by:NEILPH
ID: 33426654
I'm sorry. You're going beyond my javascript knowledge when you say "Just set the style sheet class change in the javascript load method when everything else is done."

I've added visibility to your code (see below) but now the visibility hidden\visible no longer works.

Without the visibility working the iframe does look awful waiting to load, e.g. at http://www.newsknife.com/test.html


<body bgcolor="#ffcc00">
<script type="text/javascript">
function load()
{
var currentTime = new Date()
var day = currentTime.getDate()
var fday = day + '.html'
document.getElementById('feat1').src = fday;
}
window.onload = load;
</script>

      <iframe id="feat1" width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10" style="visibility:hidden;" onload="document.getElementById('feat1').style.visibility = 'visible';"> 
              <p>Your browser does not support iframes.</p></iframe>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33428369
Here. Problem solved

<script>
document.write('<iframe id="feat1" src="'+new Date.getDate()+'.html" width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10" style="visibility:hidden;" 
onload="document.getElementById('feat1').style.visibility = 'visible';"></iframe>')
</script>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33428379
If you want to NOT see the iframe at all until loaded (also you could more all the styling into the style tag:

<script>
document.write('<iframe id="feat1" src="'+new Date.getDate()+'.html" width="294" height="70" scrolling="no" frameborder="0"  marginwidth="0" marginheight="10" style="display:none; margin-top:0px" 
onload="document.getElementById('feat1').style.display='';"></iframe>')
</script>

Open in new window

0
 

Author Comment

by:NEILPH
ID: 33434969
I can't get either of your above to work in IE8 or Firefox. Absolutely nothing happens, including no iframe space in the parent page.

I've tried variations [see below] to try to see if the problem is in the date syntax or layout syntax.

- avoid putting the getDate() inline,
- change Date.getDate() to currentTime.getDate(),
- not use dates
- change style.visibility = 'visible' to style.visibility:visible

It beats me.
Version: date variable preset...
<script>
var currentTime = new Date()
var day = currentTime.getDate()
var fday = 'todays_specials/' + day + '.html'
document.write('<iframe id="feat3" src="'+ fday +'.html" width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10" style="visibility:hidden;" 
onload="document.getElementById('feat3').style.visibility = 'visible';"><p>Your browser does not support iframes.</p></iframe>')
</script>


Version: inline date variable changed to currentTime
<script>
document.write('<iframe id="feat3" src="todays_specials/'+new currentTime.getDate()+'.html" width="294" height="70" scrolling="no" frameborder="0"  marginwidth="0" marginheight="10" style="display:none; margin-top:0px" 
onload="document.getElementById('feat3').style.display='';"><p>Your browser does not support iframes.</p></iframe>')
</script>

Version: change visible syntax at end, and not using dates
<script>
document.write('<iframe id="feat3" src="browser_test2.html" width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10" style="visibility:hidden;" 
onload="document.getElementById('feat3').style.visibility:visible;"></iframe>')
</script>

Open in new window

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 33435457
Sorry I forgot to escape the single quotes and you broke the lines and had a .html too many - document.write does not like that



<script>
var currentTime = new Date()
var day = currentTime.getDate()
var fdayFile = 'http://www.google.com/search?q=todays_specials/' + day + '.html'
document.write('<iframe id="feat3" src="'+ fdayFile +'" width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10" style="visibility:hidden;" onload="document.getElementById(\'feat3\').style.visibility = \'visible\';"><p>Your browser does not support iframes.</p></iframe>')
</script>
<hr />

Open in new window

0
 

Author Closing Comment

by:NEILPH
ID: 33438560
Brilliant. Thanks mplungjan.
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Embedd an image or live dashboard into Slack 1 55
Set css in function 11 56
Check if field exists SPUtility 5 48
why is my slideshow so small on this wordpress site? 7 41
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

752 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