iFrames - Interacting with 3rd Party Sites via JavaScript

Discussion in 'JavaScript' started by hotchocko, Aug 26, 2010.

0
  1. #1
    I am iFraming part of a 3rd party's web page. When the user clicks a link on the 3rd party site, I then want it to break out of frames (if it can't breakout completely, I would like the iframe to expand to accommodate the entire 3rd party web page). How would I go about doing this with JavaScript? What code would I use? (I'm not a programmer, just a web designer)

    An example would be I iframe just the Google search box, and when the user clicks 'search', the page with the search results expand to the entire page.
     
    hotchocko, Aug 26, 2010 IP
  2. hotchocko

    hotchocko Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Any ideas?
     
    hotchocko, Aug 31, 2010 IP
  3. tdemetri

    tdemetri Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    if your iFrame is given an id, you can call it from the DOM just like any other element to resize it how you want. 
    <script type="text/javascript">
function grow(){
document.getElementById("if").height="600"	
}
</script>
</head>

<body>
<iframe id="if" src="http://www.google.com" width="100%" height="200">
</iframe>
<input type="button" onclick="grow()" />
</body>
    Code (markup):
    or use jQuery to have it animate to the size you want:


    <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("button").click(function(){
    $("iframe").animate({height:300},"slow");
    
  });
});
</script> 
</head>
 
<body>
<button>Start Animation</button>
<br /><br />
<iframe id="if" src="http://www.google.com" width="100%" height="100">
</iframe>


</body>
    Code (markup):
     
    tdemetri, Sep 1, 2010 IP