Display a section of an iFrame only

Hi, I am using the following code in order to display and parse a search query.

$(document).ready(function () {
            url = window.location.href;
            var querystring = url.split("?")[1]; //GuessID=123&someother=123
            var targeurl = "http://old.racingnsw.com.au/default.aspx?s=search-wp&" + querystring;
            var $iframe = $('#horse-name-search-iframe');
            if ($iframe.length) {

                $iframe.attr('src', targeurl);
              $('#horse_name_searchid').load('http://old.racingnsw.com.au/default.aspx?s=search-wp #ctl06_Container');

                return false;
            return true;

Open in new window

but when loaded, it is loading the iframe as a whole giving me a pge within a page.
how can I target only the inside content, so that no footer or header is displayed. i am trying to hide the top through css but that is not ideal, therefore I wought of a javascript solution

<div id="horse_name_searchid" class="horse_name_search1" style="overflow: hidden; height: 703px;">
<iframe id="horse-name-search-iframe" src="http://old.racingnsw.com.au/default.aspx?s=search" style="margin-top: -260px;"  width="100%" height="1000" frameborder="0" ></iframe>

Open in new window

Who is Participating?
Chris StanyonCommented:
As I said in my previous post, you're not going to be able to set your iFrame source to a part of a page - you can only include a full URL, which is what you're doing and is why you're getting the full page. That's just the way it works.

I also mentioned that you're trying to do 2 things - set the src of an iFrame AND load the content into a DIV. Setting the src gives you the problem you're having. Loading the content won't work because the content is on a different domain, so the call to load() fails with a cross-origin request error.

You're going to have to rethink your approach.
Chris StanyonCommented:
Your code look a little off. Basically, you look like you're trying to load the content twice - once by setting the src of the iFrame and once by loading partial content into a DIV (lines 10 and 11 of your code)

You should choose one of these methods - not both. If you choose to go with the iFrame, you're not able to set the src to be a partial so you would get the whole page within a page. If you want to set the content of the DIV with a partial, then you would need to examine the target page and select a partial by using an ID on some wrapper, such as #ctl06_Container in your example.

Having said that, even if you do load that partial, I'm not sure how it would work in your own site because it contains a form which is likely to submit to a page on the tagret site, not on your own.

You may have to re-think what you're trying to acheive here.
Chris StanyonCommented:
Ass an after though to my rpevious comment, you may have cross-domain request issues when trying to use the load() method. You may only be able to load in content from the same domain as your script!
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

jhonc66Author Commented:
Hi chris, thank you for your response, i have done it , please have a look at the following link i forgot to post when asking

jhonc66Author Commented:
still with the problem of displaying everything, for now I have used CSS to hide the top with a negative margin
but not ideal.. as you can see there is a blue footer in that iframe
jhonc66Author Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.