【问题标题】:Sweet Alert 2 Open in Parent FrameSweet Alert 2 在父框架中打开
【发布时间】:2017-11-19 19:26:29
【问题描述】:

我有一个 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>

【问题讨论】:

  • 你试过top吗?
  • 'top' 没用,控制台报同样的错误:sweetalert2.min.js:1 SweetAlert2: Target parameter is not valid, default to "body"
  • @LarryManer 你能添加完整的 html 代码吗?
  • 我想这是不可能的。见stackoverflow.com/questions/38788590/…
  • @IvanBarayev 我添加了代码,您需要更多代码吗?

标签: jquery html sweetalert2


【解决方案1】:

您好,您可以在父窗口中添加 sweetalert2 代码。然后在 iframe 中使用 JavaScript 的 parent 属性来调用该函数。为避免出现同源策略错误,您可以使用窗口发布消息。

像这样:

父级 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>

【讨论】:

  • 没问题,很高兴为您提供帮助。
  • 是否可以使用框架集?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-06-18
  • 1970-01-01
  • 2018-12-04
  • 2021-07-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多