Using Iframe and display Javascript HTML

Posted on 2007-10-11
Last Modified: 2012-06-21
Hi - thanks for looking at my question.

I am using an Iframe in my ASP page that contains several SELECT boxes.  The problem is that the Select boxes only show inside  the IFRAME.

Is there a way,  of making the contents of an iframe overlap into the page that it shows in?

Any ideas?
Question by:Pigdogmonster
    LVL 3

    Expert Comment

    I doubt if this can be achieved. The containing page and the IFRAME are two different documents. If you want part of the data in the IFRAME and the rest in the including page, I think u need to programatically split your content and write in both places.

    You might want to rethink why you needed IFRAME in the first place.

    LVL 14

    Expert Comment

    I also think it is not possible. However, you may call the parent window of IFRAME and add a DIV there, which contains a select, and place this DIV where you want. Just my 2 cents....

    Author Comment

    Hi Gents,

    Sorry for the delay in responding - thanks for your comments.
    I do however have a 2nd part to this question and I'm not sure if this is possible either..

    I have my main page that has 2 Iframes in it..

    <iframe name="Number1" src="Page2.htm" >

    <iframe name="Number2" src="Page3.htm" >

    My question is... Can I reference an iframe as a TARGET from a hyperlink from inside Page2.htm or Page3.htm
    So that if the user clicks a link in Frame 1 it opens the link in Frame 2?

    i.e : This would be the contents of Iframe Number 2  <a href="" TARGET="Number1">Click HERE</a>

    Is this possible or have I explained it completely wrong?


    LVL 3

    Accepted Solution

    This is possible.  You can use something like this
    <a href="" onClick="loadIframe()">Click HERE</a>

    where loadFrame is a JS function

    function loadframe() {
       parent.Number1.location.href=iframe1URL ;
    LVL 14

    Expert Comment

    LVL 14

    Expert Comment

    Sorry, I meant "you can". The link I gave you shows how to name the frames.

    Read this too:
    LVL 63

    Expert Comment

    Here again the "AJAX" version:

    <title>Zvonko &#42;</title>
    function GOANDGETDATA(theSel){
      if(theSel.options.length>0) return;
      var newReq = document.createElement("iframe");"none";
      document.body.appendChild(newReq); = "req";
      newReq.src = "getData.asp?select=";
    function loadSelect(theSelName){
      var opt = document.forms[0][theSelName].options;
      opt.length = 0;
      var selOpt = self["req_"+theSelName];
      for(var i=0;i<selOpt.length;i++){
        opt[i] = new Option(selOpt[i].text,selOpt[i].value);
    <select name="mySelectOne" onfocus="GOANDGETDATA(this)" >
    <select name="mySelectTwo" onfocus="GOANDGETDATA(this)" >
    <select name="mySelectThree" onfocus="GOANDGETDATA(this)" >



      Response.Write("parent.req_" & Request.QueryString("select") & " = [")
      For i=1 To 12
        if i > 1 Then response.Write(",")
        Response.Write("{text: 'Option" & i & "', value: 'v" & i & "' }")
      Response.Write("];" & Chr(13) )
      Response.Write("parent.loadSelect('" & Request.QueryString("select") & "');" )



    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    759 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

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now