JQuery iframe頁面

zybing發表於2021-09-09
jQuery

JQuery iframe頁面透過parent方法操作父頁面中的元素與方法(例項講解)


1）在iframe中查詢父頁面元素的方法：

$('#id', window.parent.document)

2）在iframe中呼叫父頁面中定義的方法和變數：

parent.method

parent.value

3）例項

1.父頁面

複製程式碼 程式碼如下:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IframeDemo._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >

<head runat="server">

    <title></title>

    <script language="javascript" type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.5.1.min.js"></script>

    <script language="javascript" type="text/javascript">

        var hello = 'hello';

        function getHelloWorld() {

            alert('hello world');

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <div id="default" >default.aspx</div>

    <iframe id="iframeid" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="IFrame.aspx" ></iframe>

    </div>

    </form>

</body>

</html>


2.子頁面

複製程式碼 程式碼如下:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IFrame.aspx.cs" Inherits="IframeDemo.IFrame" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >

<head runat="server">

    <title></title>

    <script language="javascript" type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.5.1.min.js"></script>

    <script language="javascript" type="text/javascript">

        $(function() {

            //在iframe中查詢父頁面元素

            alert($('#default', window.parent.document).html());

            //在iframe中呼叫父頁面中定義的方法

            parent.getHelloWorld();

            //在iframe中呼叫父頁面中定義的變數

            alert(parent.hello);

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="iframe">

        IFrame.aspx

    </div>

    </form>

</body>

</html>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/855/viewspace-2816978/，如需轉載，請註明出處，否則將追究法律責任。

相關文章