How to change iframe pages without the parent page changing with external links using CSS


Tags: html,css,iframe

Problem :

I'm working on a webpage where I need to be able to click on buttons that change iframes with in a parent page. I thought this would be a simple task but no matter what I do, the button keeps opening a new window rather than opening the page inside the iframe. The page looks perfect and the iframe loads up but when I click the button in the parent window to change the page it opens in a new tab. Here is the complete code I'm using (minus the changed webpage names) if someone could point out what I'm doing wrong please.

<head>
<style>
  body
  {
    background-image:url(bg4.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top;
    background-size:100%;
  }
  p.pos_fixed
  {
    position:fixed;
    top:98px;
    right:298px;
  }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stupid webpage that dont work</title>
</head>

<body>
  <p class="pos_fixed">
    <iframe id="MSL" src="http://www.yahoo.com" width="975" height="800">
    </iframe>
    <center>
      <a href="http://www.google.com" target="MSL">
      <img src="MSL.jpg" alt="MSL" width="42" height="42"></a>
    </center>
  </p>

</body>
</html>


Solution :

In order for your link to target the iframe, you must add the "name" attribute to such frame, nothing to do with "id"

<iframe id="MSL" name="MSL" src="http://www.yahoo.com" width="975" height="800">
</iframe>

Also, your DOM structure is very bad, you should not nest iFrames inside paragraphs. In short, the target attribute in anchor elements need to match the name attribute in the iFrame unless it is a reserved one such as "_blank", "_self", "_parent", or "_top".


    CSS Howto..

    How to place two labels around an image (dynamically); right and bottom?

    Parsing awful HTML: How do I recognize boundaries with xpath?

    How to fit whole image in to div which have his dimensions

    How Can I Make The HTML Page More Narrow?

    How to give css sprites effect?

    How can I adjust image width and height to 100 x 100 keeping ratio?

    How to display UpdateProgress at the center of a grid view with CSS?

    How to place divs with background-images in order with 100% width?

    How to add link without ruining transition CSS/HTML

    Primefaces: how to change the default icon on the button of the calendar field?

    How to add this element in jquery

    How do I disable Emmet's CSS Abbreviations in Sublime Text 2

    How can I add a transition effect when opening my custom modal window?

    How can I create this specific layout using html and css?

    how to position these CSS elements without defining height and width

    How to create a circumference with CSS? [closed]

    How to position an inner - inner tag at different position?

    How do I get a bold version of a custom font?

    How to apply a css class for jqGrid height property setGridHeight?

    how to let CMS make use of my css files instead of its own css?

    How to call am (image) div inside of a list?

    php search result images show across and fill a CSS div

    How Do I Add CSS Transition Effect to This

    How to clip canvas with CSS clip-path?

    How to add and remove a current state to a link when another is clicked using jQuery

    How to change TextBox class based on input

    How to scale content for displays keeping the ratio [closed]

    How to make menu to slide right on click using HTML and CSS?

    How to use padding and lengthen bootstrap search bar?

    How do I position a div below an image with changing height?