Question

我有一个iframe，其源代码是一个php文件。我想要做的是让Sweet Alert 2在父框架中打开，而不是在iframe内部打开。我试过改变目标但没有取得任何成功。

以下目标选项均无效：

swal({
    target: 'window'
    target: 'document'
    target: 'parent'
});

当'body'成为目标时，我得到的结果是：

编辑：

SweetAlert 2代码

swal({
    type: 'error',
    text: 'You did not select any files.',
    target: 'top'
});

iFrame代码

<div id="viewWindow" class="col-xs-10 content">
    <iframe id="waiverList" src="php/edit_archive.php"></iframe>
</div>

Answer 1

您可以做的就是在父窗口中输入sweetalert2代码。然后在iframe中使用JavaScript的父属性来调用该函数。为避免出现相同的原始策略错误，您可以使用窗口发布消息。

像这样：

家长Html

<!DOCTYPE html>
<html>
<body>
<script> 
    function openAlert() {
        swal(
            'Good job!',
            'You clicked the button!',
            'success'
        )
    }
    window.addEventListener("message", function(event) {
        if(event.data == "openAlert");{
            openAlert();
        }
    });

</script>
    <iframe src="iframe.html">

    </iframe>
</body>
</html>

iframe HTML

<!DOCTYPE html>
<html>
<body>
     <button onclick="foo();">Click Me</button>
     <script>
     function foo(){
         parent.postMessage("openAlert", "*");
     }
     </script>
</body>
</html>

Sweet Alert 2在父框架中打开

1 个答案: