如何从代码背后调用IFrame中的JS函数

How to Invoke JS function in IFrame from code behind

本文关键字：IFrame 中的 JS 函数 调用 背后 代码      更新时间：2023-09-26

Asp.Net 4.5(WebForm(

如何从代码隐藏成功调用Iframe中的js函数？我正在使用RegisterClientScriptBlock激发aspx页面中的JS函数，该函数反过来调用iframe的html页中的JS功能。

主页中的客户端按钮工作正常。服务器按钮无法按预期工作。但是它确实识别iframe对象和contentWindow。

错误

  • TypeError:对象不支持属性或方法"TestFunc">

任何建设性的帮助都将不胜感激。注：为了清楚起见，这是一个精简的例子。

MainPage.aspx

<head runat="server">
<title></title>
<script type="text/javascript">
    function InvokeJS(param) {
        var iframe = document.getElementById("MyIFrame");
        try {
            iframe.contentWindow.TestFunc(param);
            //=============================================================
            //Would really like to use the .apply method over calling the 
            //function directly. This does work in pure HTML, but not aspx
            //============================================================= 
            //var _ARGS = [];
            //_ARGS.push(param);
            //iframe.contentWindow('TestFunc').apply(null, _ARGS);
        } catch (e) {
            alert(e);
        }
    }
</script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="ServerButton" runat="server" Text="Server" />
            <input id="ClientButton" type="button" value="Client" onclick="InvokeJS('From Client');" />
            <br />
            <br />
            <iframe id="MyIFrame" runat="server" src="Pages/Test.html" style="width: 700px; height: 300px;"></iframe>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>
</body>

MainPage.aspx(CodeBehind(

Protected Sub ServerButton_Click(sender As Object, e As EventArgs) Handles ServerButton.Click
    ScriptManager.RegisterClientScriptBlock(Me, Me.GetType, "InvokeJS", "InvokeJS('From Server');", True)
End Sub

Test.html(加载到iframe中(

<head>
<title>Test</title>
<script type="text/javascript">
    function TestFunc(param) {
        document.getElementById("DisplayParam").innerHTML = param;
    }
</script>
</head>
   <body>
      <h1>HTML Page</h1>
      <h2 id="DisplayParam"></h2>
   </body>
</html>

window.onload=TestFunc((；不起作用，因为Test.html实际上在onload事件引发之前没有完全加载，这与ServerButton相同，因为脚本块是在加载Test.html之前注册的。这就是为什么没有可调用的TestFunc。

你可以试试

<asp:Button ID="ServerButton" runat="server" Text="Server" OnClientClick="InvokeJS('From Server');" />

如果你想让它在运行脚本之前做点什么，我认为你不喜欢它

然后玩这个把戏

 <script type="text/javascript">
     //this is help check if postback by Server Button, if yes then invoke
     var prm = Sys.WebForms.PageRequestManager.getInstance();
     prm.add_beginRequest(BeginRequestHandler);
     function BeginRequestHandler(sender, args) {
         if (args._postBackElement.id == '<%=ServerButton.ClientID%>')
             $('#MyIFrame').load(function(){
                 InvokeJS('From Client');
                 console.log('load the iframe');
             });

        }
 </script>
相关文章：