How to remove double scroll bars when embedding a page?

Question

There are a few questions on here similar to this one but their solutions don't seem to work for me. Basically I have embedded a page into a page on a website and am getting double scroll bars, one within the iframe and one in the page it is embedded in. What I would like is to do away with the scroll bar in the iframe and make it extend 100% of the iframe and only use the scroll bar in my page. So it would be hard to tell it is an embedded page. I am using Bootstrap's iframe embed class to keep the page responsive. If I need to do away with that class that's fine. Here is the html.

<div class="container">
<div class="main">
  <div class="inner-main">
      <h1>Page Heading</h1>
      <div class="row">
        <div class="col-lg-12">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe  class="embed-responsive-item" src="mylink"></iframe>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

Is there a simple way to do this? The embedded page is rather long so I need it to push my page down all the way.

Here is what I ended up doing:

<iframe onload="scroll(0,0);" class="embed-responsive-item" src="mylink"></iframe>

CSS

.embed-responsive-16by9 {
    height: 6060px;
    }

iframe {
    width: 100%;
    display: block;
    height: 6060px;

  }

I will be on the lookout for a better way to do this

you need to get the height of the inner page and assign the height to the iframe. this can be done by using a jquery. the script will run on the iframe page and it will call the script on the parent page or window.parent.$(elementid).attr(attributeName); — Usman Khawaja, Nov 02 '15 at 18:01
I ended up basically just doing this with CSS. Setting iframe height to the origin page's height. — jfoutch, Nov 02 '15 at 18:57
Sure I will edit my original question. It is not the ideal solution however. When you switch to another page within the iframe that is not that height you have a ton of white space at the bottom, but at first glance it looks like I want it and for now it'll have to do. — jfoutch, Nov 02 '15 at 19:01
can you please check the code $('#iframe_id').load(function () { $(this).height($(this).contents().height()); $(this).width($(this).contents().width()); }); will this help if you reload the page in iframe — Usman Khawaja, Nov 02 '15 at 19:02

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

1

Edit: removed my other answer, I misread the question.

It is tough to do unless the iFrame and parent page on the same domain, something like this should work:

Resizing iframe to fit its content

edited May 23 '17 at 11:58

Community

1
1

answered Nov 02 '15 at 17:57

John Fable

1,081
7
11

Yes it's cross-domain. There was a link to this https://github.com/davidjbradshaw/iframe-resizer on that linked SO question so I'll check it out. – jfoutch Nov 02 '15 at 18:09

score 0 · Answer 2 · answered Nov 02 '15 at 18:39

0

your script will be if you are not using the contents from cross-domain

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

answered Nov 02 '15 at 18:39

Usman Khawaja

809
14
28

How to remove double scroll bars when embedding a page?

2 Answers2