Featherlight: загрузка iframe с использованием только javascript - PullRequest
Новая
       30

Featherlight: загрузка iframe с использованием только javascript

0 голосов
/ 29 января 2019

Я использую Featherlight, чтобы создать «всплывающее» окно iframe, в частности страницу с Условиями и положениями, которую необходимо принять, прежде чем сайт можно будет просмотреть.

Технически это работает... всплывающее окно появляется и работает так, как и должно быть.Однако в консоли появляется ошибка, которая останавливает работу всех последующих сценариев:

TypeError: target is undefined

Я думаю, что это связано с тем, что я вызываю iframe чисточерез javascript вместо вызова HTML-элемента, такого как div.

Это мой код (я использую WordPress, поэтому там есть .env('WP_HOME')): 

<script>
    var iframe = "'.env('WP_HOME').'/terms-conditions/";
    jQuery(document).ready(function() {
        jQuery.featherlight(
        iframe, {
            variant: "fl-terms",
            type: "iframe",
            closeOnEsc: false,
            closeOnClick: false,
            closeIcon: "",
            otherClose: "#accept-submit",
            beforeClose: function(event){
                return false;
            }
        });
    });
</script>

IЯ думаю, что с конфигурацией может быть что-то не так, но я не смог выяснить, что, потому что я еще не нашел подобный пример кода.

Благодаря предложениям imvain2, этомой окончательный код, который не вызывает ошибок: 

<script>
    var iframe = "'.env('WP_HOME').'/terms-conditions/";
    jQuery("#_top").featherlight(
    iframe, {
        variant: "fl-terms",
        type: "iframe",
        closeOnEsc: false,
        closeOnClick: false,
        closeIcon: "",
        otherClose: "#accept-submit",
        beforeClose: function(event){
            return false;
        }
    });

    jQuery(document).ready(function() {
        jQuery("#_top").click();
    });
</script>

И в моем header.php я добавил следующее прямо под тегом <body>: 

<a id="_top" class="no-scroll" href="#"></a>

1 Ответ

0 голосов
/ 29 января 2019

В соответствии с (https://github.com/noelboss/featherlight/) FL будет привязывать к тому элементу, который вы передаете, если вы не отключите автосвязку, но затем при этом выполняется поиск атрибута данных.

Попробуйте связать функцию с телом (или документом).). 

    var iframe = "'.env('WP_HOME').'/terms-conditions/";
    jQuery(document).ready(function() {
        jQuery("body").featherlight(
        iframe, {
            variant: "fl-terms",
            type: "iframe",
            closeOnEsc: false,
            closeOnClick: false,
            closeIcon: "",
            otherClose: "#accept-submit",
            beforeClose: function(event){
                return false;
            }
        });
    });
...