Display a section of an iFrame only

jhonc66
jhonc66 used Ask the Experts™
on
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>
</div>

Open in new window

display-only.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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!

Author

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

http://www.racingnsw.com.au/ownerships-bobs/horse-name-search/
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
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.

Author

Commented:
Thanks

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial