First time here? Checkout the FAQ!
x

Got a Question ? We Got the Answers !

0
How to iFrame a specific area of a webpage?

Solved 2 Answers 52 Views Website
I want to get data from a website but they have ad on header, is there any way I can iFrame the area under header and menus?

2 Answers

2
Best answer

You will need to test to get the perfect dimensions, as haven't seen your page so can't tell for sure.
Some options you have :


<div class="wrapper">
    <div class="hidead"></div>
    <iframe width='828' height='465' frameborder='0' allowfullscreen src='somelink. Com'></iframe>
</div>


You  can later make a hidead  class in your css and set it to show anything covering the top.
Your css might look like :


.wrapper{
    position:relative;
    z-index: 1;
    display: inline-block;
}

.hidead{
    position: absolute;
    width: 150px;
    height: 40px;
    background: #222;
    right: 0px;
    bottom: 6px;
    z-index:999;
    display: block;
    color: #fff;
}


Another option is to frame only a certain  Div, this will work Only if CORS is not blocked.. Which might be in majority of cases. If not


$('#target-div').load('site.com #leech-data');


Lastly a technique which would work but is crude, is


<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="https://drhack.net/" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;">
</iframe>
</div>


You can  hide the top by changing the margin-top

answered Mar 5 by Dr-Hack
selected Mar 10 by Abdul Raziq
3Comments
commented Mar 5 by eirtaza
simple but good :p
commented Mar 10 by Abdul Raziq
Awesome, I just figured out it :) Thank you
commented Mar 10 by Dr-Hack
@eirtaza , yeah at times its how you manage to achieve something :)
1

one way is using backend language e.g. asp, node or php to get and parse the content.

other way is using javascript in your page

e.g. 

and deleting the desired element
answered Mar 5 by eirtaza
...