logo标签列表

如何移除Iframe滚动条但保证全页面加载？

javascripthtmlcssiframescrollbar
12
在contentArea中添加Iframe后，会出现两个滚动条。我想隐藏iframe的滚动条而不隐藏外部网站链接的任何内容。我添加了下面的代码片段并尝试了一些东西，如scrollbar="no"，但都没有成功。请帮我解决这个问题，提前感谢您。

我需要contentArea的滚动条。只想隐藏iframe的滚动条而不隐藏外部网站的内容。 


body{margin:0;padding:0;}
.contentArea{height:100%; width:100%; position:absolute; top:0;left:0;overflow-y:scroll;}
iframe{height:100%; width:100%; position:absolute; top:0;left:0;border:0;}
<div class="contentArea">
<iframe src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>

我不理解这个问题，移除 overflow-y: scroll; 后你只会有一个滚动条。 - Temani Afif
7个回答
1
尝试这个方法，你可以隐藏iframe的滚动条，但仍然可以滚动页面。
<div style='width: 500px; height: 120px; overflow: hidden;'>

    <iframe style='width: 518px; height: 120px;' src=''></iframe>

</div>
1
0

如果没有控制 iframe 指向的域，这是不完全可能的。但是，这是你能够接近你所寻找的并且可靠的。

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.contentArea {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: auto;
  overflow-y: scroll;
}

.flex-box {
  flex-grow: 1;
  flex-basis: 0;
  overflow: hidden;
  /* Set height as percentage of viewport */
  min-height: 100%;
}

iframe {
  /*
  DO not adjust height of iframe here.
  set the height on .flex-box
  */
  width: calc(100% + 16px);
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

.additional-content {
  padding: 15px;
  background-color: #CDDC39;
}
<div class="contentArea">

  <div class="additional-content">Content Before. Remove and iframe will fill this space.
  </div>

  <div class="flex-box">
    <iframe id="myIframe" src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
  </div>
  <div class="additional-content">
    Some content after.<br> Remove and iframe will fill this space. Remove both top and bottom additonal content and the iframe will fill entire window.
  </div>
</div>

0

隐藏滚动条

很遗憾，如果您无法在标头中指定允许从不同来源选择Iframe中的项目，则无法选择该项。有更好的答案来设置跨域标头 - 仅本地编辑跨域Iframe内容

您不应该隐藏Iframe的滚动条，因为用户将使用它来滚动。像这样隐藏内容滚动条。

body {
  margin: 0;
  padding: 0;
}

.contentArea {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: scroll;
}

iframe {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

.contentArea::-webkit-scrollbar {
  display: none;
}

.contentArea {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
<body>
<div class="contentArea">
  <iframe src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>
</body>

为了与其他浏览器兼容，请阅读此内容。https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

0
你可以使用 overflow:hidden。
.contentArea {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: hidden; //This should hide the scrollbar for you
}
0
我使用了这个想法来“无缝”地将WordPress页面嵌入到Magento2页面中，使用了一个iframe...因为我真的需要WP模板...而且它有效。
添加了这个JS。
// stackoverflow.com/questions/1145850/
function getDocHeight(doc) {
    doc = doc || document;   
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight,
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    const ifrm = document.getElementById(id);
    const doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
    ifrm.style.height = getDocHeight( doc ) + 2 + "px";
}

使用此 iframe 代码

<iframe id='wp-twoblock-0'
 src='https://www.example.com/wp/twoblock'
 onload='setIframeHeight(this.id);'
 style='border:0px;vertical-align:bottom;width:100%;overflow:hidden;' 
 target='_PARENT' marginwidth='0'
 marginheight='0' frameborder='0' scrolling='no' ></iframe>

主要的工作方式如下：

  1. 加载iframe内容
  2. 运行setiframeHeight函数
  3. 然后根据给定的CSS将iframe高度调整为正确的内容高度，完成！

没有隐藏任何iframe内容，也没有双重滚动条！希望能对您有所帮助！演示请点击此处：https://copy.pc.pl/test.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="">
  <meta name="viewport" content="width=, initial-scale=">
  <title></title>
  <script>
    function getDocHeight(doc) {
      doc = doc || document;
      var body = doc.body,
        html = doc.documentElement;
      var height = Math.max(body.scrollHeight, body.offsetHeight,
        html.clientHeight, html.scrollHeight, html.offsetHeight);
      return height;
    }

    function setIframeHeight(id) {
      const ifrm = document.getElementById(id);
      const doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
      ifrm.style.height = getDocHeight(doc) + 2 + "px";
    }
  </script>
</head>

<body>
  <h1>Parent</h1>
  <iframe id='wp-twoblock-0' src='otherdocument.html' onload='setIframeHeight(this.id);' style='border:0px;vertical-align:bottom;width:100%;overflow:hidden;' target='_PARENT' marginwidth='0' marginheight='0' frameborder='0' scrolling='no'></iframe>
</body>

</html>

-2

您可以使用CSS隐藏滚动条

.contentArea iframe::-webkit-scrollbar {
  width: 0px;
}

这应该可以满足你的需求。

我尝试过了，但它不起作用。如果您添加代码片段将会很好。 - Ajay Malhotra
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接