Question

我在iframe中嵌入了一个格式表单，但是我不希望它在iframe中滚动。

这是我的代码：

<html>
  <head>
    <title>Project</title>
  </head>
  <body>
    <iframe class="typeform-widget"
      src="https://weblify.typeform.com/to/WDbDw2" data-transparency="50"
      data-hide-headers=true data-hide-footer=true style="width: 100%; height: 500px;">
    </iframe>
    <script> 
    (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })
    </script>
  </body>
</html>

有人知道解决方案吗？

Answer 1

我想知道您是否真的需要使用iframe元素，也许是因为您的上下文。

从Typeform's embed SDK和他们的一个examples中，我看到他们将div与id="my-embedded-typeform"一起使用，然后加载嵌入式SDK脚本和自定义脚本来配置和触发它。

    <div id="my-embedded-typeform"
     style="width: 100%; height: 300px;"></div>



    <script src="https://embed.typeform.com/embed.js" type="text/javascript">`enter code here`</script>
    <script type="text/javascript">
      window.addEventListener("DOMContentLoaded", function() {
      var el = document.getElementById("my-embedded-typeform");

      // When instantiating a widget embed, you must provide the DOM element
      // that will contain your typeform, the URL of your typeform, and your
      // desired embed settings
      window.typeformEmbed.makeWidget(el, "https://admin.typeform.com/to/cVa5IG", {
        hideFooter: true,
        hideHeaders: true,
        opacity: 0
      });
    });
  </script>

他们在文档中mention建议不要嵌入用于嵌入的自定义脚本，因为它们可能会导致滚动问题（以及其他问题）。

也许遵循their guides可以帮助您实现目标，或者至少使其更易于管理。

希望对您有帮助！

Answer 2

尝试

.typeform-widget:before {
    content: '';
    width: 100px;
    height: 500px;
    position: absolute;
    background: #FFF;
    left: 94%;
}

禁止在iframe中使用Typeform滚动

2 个答案: