iframe 不显示 onload，但在手动重新加载后会显示

Question

我正在使用 Asp.net/C# 环境和 Visual Studio 2013 创建 Web 应用程序。

我有一个页面 (aspx)，其中只有一个 iframe，还有一个使用 jquery 将 html 放入该框架的 javascript 方法。

<asp:Content runat="server" ID="MainSectionContent" ContentPlaceHolderID="MainSectionContentPlaceHolder">
    <section runat="server" id="FrameSection" clientidmode="Static">
        <asp:ContentPlaceHolder runat="server" ID="FrameSectionContentPlaceHolder" />
        <iframe id="FrameContentFrame" name="FrameContentFrame" src="about:blank" seamless="seamless" onload=" loadFrameContent(); "></iframe>
    </section>

    <script type="text/javascript">
        //<![CDATA[
        function loadFrameContent() {
            jQuery('#FrameContentFrame').contents().find('html').html('<%= FrameContent %>'); //FrameContent is a c# property which holds a syntactically correct html string
        }
        //]]>
    </script>
</asp:Content>

在我后面的代码中，我从服务器获取一个长字符串并将其存储在属性 FrameContent 中。这个长字符串在语法上是正确的 html。

结果应该是： onload，javascript方法运行。 iframe 填充了 html，因此 html 字符串显示给用户。

但真正发生的事情是： 什么都没有显示。出现 Javascript 错误，提示“函数 loadFrameContent 未定义”。但如果我在我的网络浏览器中查看页面源，它​​就很明显了。如果我右键单击框架应该所在的空白页面，然后选择“重新加载框架”（Google Chrome），框架会显示 Html。

所以：Html 字符串是正确的。框架是正确的。框架可以正确显示html。但是，框架无法显示 Html onload，它需要额外的手动重新加载才能真正显示任何内容！我检查了浏览器上的页面源代码，并且存在 Javascript 函数，并且 FrameContent 属性填充了正确的 html 字符串。

Answer 1

在我看来，这似乎是一个时间问题。空白 iframe 将在您的父页面之前完成加载，因此它将在父页面完成解析其 dom 之前调用loadFrameContent（因此不会注册该方法）。摆脱 iframe onload 并添加以下内容：

<script type="text/javascript">
    //<![CDATA[
    function loadFrameContent() {
        jQuery('#FrameContentFrame').contents().find('html').html('<%= FrameContent %>');     //FrameContent is a c# property which holds a syntactically correct html string
    }

    $(loadFrameContent);

    // Or if you're using an older version of jQuery
    //$(document).ready(loadFrameContent);
    //]]>
</script>