Featherlight：仅使用 javascript 加载 iframe

Question

我正在使用 Featherlight 创建一个 "pop-up" iframe，特别是一个包含条款和条件的页面，需要先接受该页面才能查看该网站。

从技术上讲它正在工作...弹出窗口按照预期的方式出现和运行。但是，控制台中出现错误，导致任何后续脚本停止运行：

TypeError: target is undefined

我认为这是因为我纯粹通过 javascript 调用 iframe 而不是像 div.

那样调用 HTML 元素。

这是我的代码（我使用的是 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>

我认为配置可能有问题，但我一直无法弄清楚是什么，因为我还没有找到类似的代码示例。

感谢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>

Answer 1

根据 (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;
            }
        });
    });

Featherlight：仅使用 javascript 加载 iframe

Featherlight: Loading a iframe using just javascript

javascript

jquery

featherlight.js