Question

我正在使用Featherlight创建iframe的“弹出窗口”，特别是带有条款和条件的页面，需要先接受该条款才能查看该网站。

从技术上讲，它正在工作...弹出窗口会按照预期的方式显示和运行。但是，控制台中出现一个错误，该错误使所有后续脚本无法运行：

TypeError: target is undefined

我认为这是由于我纯粹是通过javascript而不是像div这样的HTML元素来调用iframe而引起的。

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

1 个答案: