Встраивание динамического скрипта при прокрутке страницы

Question

Я пытаюсь добавить 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

Просто посмотрите эту скрипку https://jsfiddle.net/qmad1uLo

В вашем коде произошли следующие ошибки.

1. Вы использовали # в атрибуте id, который недопустим
2. Вы добавляете тег скрипта в другой тег скрипта, что недопустимо.

Основная проблема заключается в том, что, возможно, вы запускаете свой основной сайт на https, но фреймзагружен на http, так что вы можете сделать так: запустите свой веб-сайт по http или попробуйте загрузить iframe по https, если это возможно, затем попробуйте указанную выше скрипку, она должна работать как charm.

Answer 2

Используйте lazyload! Я предлагаю вам этот, который поддерживает iframes: https://apoorv.pro/lozad.js/

Answer 3

Здесь много чего не так ...

$('#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> удалить '#' из идентификатора.

<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