Question

我正在尝试添加一个由form组成的iframe。当页面已经加载并在某个位置滚动时，我正在插入此iframe，我使用了jquery，该脚本在将该脚本标签附加到该div下时效果很好，但是应该在该位置加载iframe。请帮忙

请指出这个问题出了什么问题

我发现iframe是由脚本生成的，而脚本本身并未先加载

$(document).ready(function() {
  var element_position = $('#Banner').offset().top;

  $(window).one('scroll', function() {
   

    if (y_scroll_pos < 300) {
      //do stuff
      $('#form1').load("http://www.samisite.com/test-csb2nf/ifform/somejsthatgenrateiframe");
    }
  });
});

<div id="Banner"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-in">
  <script id="form1"></script>

Answer 1

这里有很多错误...

$('#Banner').offset().top;将返回未定义-请参见下面的html修复程序

var scroll_pos_test = element_position;只是重复-只需使用element_position

if (y_scroll_pos > scroll_pos_test)将不会运行，因为y_scroll_pos未定义

$('#form1').append('<script src= "http://www.samisite.com/test-csb2nf/ifform/ssform.php"><script>);

您正在将脚本标签放入脚本标签中。如果一切正常，那就是浏览器对您友善。
您的src属性是页面，而不是脚本。
您还缺少右引号。

<div id="#Banner"></div>从ID中删除“＃”。

<script id="form1"></script>您说您正在尝试加载iframe，因此请使用iframe而不是脚本。

</div>您的示例需要一个结束格。

因此，在这之后，我认为是您的解决方案：

<div id="Banner"></div>    <!--corrected id-->
    <div class="form-in" style="height:1500px;"> <!--added height to easily scroll-->
        <iframe id="form1"></iframe> <!--use an iframe-->
    </div>

    <!--keep your scripts organised at the bottom of page-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var element_position = $('#Banner').offset().top;

            $(window).on('scroll', function() {
                var y_scroll_pos = window.pageYOffset;
                if (y_scroll_pos > element_position) {

                    $('#form1').prop({ //'#form1 is now an iframe
                        'src': 'http://www.samisite.com/test-csb2nf/ifform/ssform.php',
                        'height' : '500', 
                        'width' : '100%' //make sure the height and width are enough to display the page
                    });
                }
            });
        });
    </script>

现在毕竟您可能会在开发人员控制台中遇到错误阻止加载混合的活动内容“ http://www.samisite.com/test-csb2nf/ifform/ssform.php” 在这种情况下，您的iframe内容会被浏览器阻止，因为该页面是通过http：//加载的，并且您正在通过https：//提供服务的网站上运行。有关更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

Answer 2

只要看这个小提琴https://jsfiddle.net/qmad1uLo

您的代码中存在以下错误。

您在id属性中使用了#，这是无效的
您要将script标签附加在另一个script标签内，这是不允许的。

主要问题是，也许您正在https上运行主站点，但框架已加载在http上，所以您可以做的是，在http上运行您的网站，或尝试如果可能的话，将iframe加载到https上，然后尝试上面的小提琴，它应该像魅力一样工作。

Answer 3

使用lazyload！我建议您使用一种支持iframe的广告：https://apoorv.pro/lozad.js/

页面滚动时嵌入动态脚本

3 个答案: