Javascript 如何仅在内部iFrame加载MVC时完成视图加载_Javascript_Asp.net Mvc_Iframe_.net Core

Javascript 如何仅在内部iFrame加载MVC时完成视图加载

javascript asp.net-mvc iframe .net-core

Javascript 如何仅在内部iFrame加载MVC时完成视图加载,javascript,asp.net-mvc,iframe,.net-core,Javascript,Asp.net Mvc,Iframe,.net Core,我有一个DotNet核心MVC项目。该项目有一个接收字符串数组的控制器，每个字符串表示需要放置在视图中的Iframe源模型获取字符串数组并对其进行一些操作，这意味着最终当模型完成并传递给视图时，它有一个字符串列表，可以用作iframe SRC 模型中的列表如下所示： public List<string> IFramePixels { get; set; }; 公共列表{get；set；}；这是我的观点- <body> @foreach

我有一个DotNet核心MVC项目。该项目有一个接收字符串数组的控制器，每个字符串表示需要放置在视图中的Iframe源

模型获取字符串数组并对其进行一些操作，这意味着最终当模型完成并传递给视图时，它有一个字符串列表，可以用作iframe SRC

模型中的列表如下所示：

        public List<string> IFramePixels { get; set; };

公共列表{get；set；}；

这是我的观点-

<body>
    @foreach (string iframe in Model.IFramePixels)
    {
        <iframe width='1' height='1' frameborder='0' src='@iframe'></iframe>
    }
</body>


@foreach（Model.IFramePixels中的字符串iframe）
{
}

一切正常，问题是如何将视图加载完成时间延迟到所有内部iFrame加载完成时

我想这样做的原因是，一些外部网站将我的网站作为Iframe，他们需要知道所有内部Iframe何时完成（因此我不能使用简单的JS侦听器），我想告诉他们在我的网页加载完成时做某种侦听器，这意味着内部Iframe也完成了

谢谢

编辑-> 好。。仍然找不到任何答案，也许那根本不可能？有没有人有不同的方法可以满足我的需求？谢谢

需要知道所有内部iFrame何时完成

你的这句话让我想起了用Javascript编写的Promise.All

所以，如果我没弄错的话，

jQuery.when（）

可以满足您的需求。此外，为了确保在加载所有iFrame之前不会加载页面，可以使用

一个示例代码帮助您上路：

<div>
    <iframe id="if1" src="./let.html" height="200" width="300"></iframe>
    <iframe id="if2" src="./let.html" height="200" width="300"></iframe>
    <iframe id="if3" src="./let.html" height="200" width="300"></iframe>
</div>

<script src="./jquery-3.4.1.min.js"></script>
<script>
    // call this at the top of your script to delay jQuery's ready event.
    $.holdReady(true);

    var d1 = $.Deferred();
    var d2 = $.Deferred();
    var d3 = $.Deferred();

    $('#if1').on('load', function() {
        alert('iframe 1 Loaded');
        d1.resolve();
    });
    $('#if2').on('load', function() {
        alert('iframe 2 Loaded');
        d2.resolve();
    });
    $('#if3').on('load', function() {
        alert('iframe 3 Loaded');
        d3.resolve();
    });

    $.when(d1, d2, d3).done(function(v1, v2, v3) {
        alert(' All iframes loaded');
        $.holdReady(false); // this allows document.ready to begin

        // your logic here ...
        // At this moment, all iframes are loaded ...
    });


    $(document).ready(function() {            
        alert('This page just now finished Loading');
    });
</script>

您可以随意获取代码并根据自己的意愿对其进行调整……：）

嘿，伙计！，首先，感谢你详尽的回答。请参考问题中我解释情景的部分。由于一些外部源将使用我的网站作为Iframe，我需要确保我的页面仅在所有这些内部Iframe都已加载时才完成加载，这就是为什么在我的网站上有一个简单的js侦听器是不够的。客户A正在使用我的系统，他将像素（我的网站）放在他的页面上，并需要通过编程知道何时加载这些内部iframe。因此，您的意思是您的页面包含iframe，而页面本身将在客户页面上的iframe tog中呈现。似乎上述解决方案也需要在客户方面执行。不确定，但是通过在MVC中重写

结果过滤器的方法来模拟延迟可能会有所帮助。你可以在这里读更多是的，这正是我的意思。只有在我能像你说的那样模拟延迟的情况下，客户才能做你最初的建议。OnResultExecuted在客户端加载视图之前被处理，因此iFrame甚至不会启动。这次我为您更新了答案，添加了$。holdReady延迟页面加载，直到iFrame呈现。因此，我可能在最初的尝试中出错，只是不断尝试，现在它的工作非常完美，还使用了动态iframes部分，效果非常好。谢谢！
        $.holdReady(true); // delay page load until all iframes get loaded


        var defer_Array = [];
        $.each($('iframe'), (index, tag) => {

            let temp = $.Deferred();
            defer_Array.push(temp);


            $(tag).on('load', function() {
                alert('iframe loaded #' + index);
                (defer_Array[index]).resolve();
            });
        })


        $.when(...defer_Array).done(function(v1, v2, v3) {
            alert(' All iframes loaded');
            $.holdReady(false); 
            // your logic here ...
        });