how can i set the specific area of a website in my iframe

Question

i need to make my iframe to show me a specific area of a website in my page. i failed to find the answer on the internet, i tried several codes but nothing seems to work. if anyone is kind enough to show me how to do the exact location - i need it to be where the scrolling news part is. thank you!

this is my code-

<section><iframe src="http://www.walla.co.il" scrolling="no" frameborder="0"></iframe></section>

the css -

iframe { width:130px; height:275px; position:absolute; top:40px; left:55px; clip:rect(692px 682px)}

hint: use [`window.scrollBy`](https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollBy) typically, it is used in [click-jacking](http://en.wikipedia.org/wiki/Clickjacking) — anishsane, Jun 03 '14 at 10:30

score 0 · Answer 1 · edited May 23 '17 at 11:49

You can use window.scrollBy as commented by anishsane, as long as you know how many pixels to scroll. But this will obviously change as the second pages design changes.

If this is a page under your control, this is an acceptable solution, and you now need to figure out how to remove the scrollbars (IE has posed problems for me in the past).

If this page is from another domain, you have another problem to deal with. The cross domain policy for iframes.

Dave · Answer 2 · 2014-06-03T11:23:05.247

This does what you want...

<html>
<head>
<script>
function scrollTheIframe()
{
var frame = document.getElementById("ifr");
frame.contentWindow.scrollTo(350,300);
}
</script></head>
<body onLoad = "scrollTheIframe()">
<iframe src="r.html" id="ifr" width="500">
</iframe>
</body>
</html>

The above example does expect the page (in the iframe) to load very fast... If updated the source to an external site, such as bbc.co.uk then it didn't function. the r.html I've used in the above was a very small file.

how can i set the specific area of a website in my iframe

2 Answers2