Question

我有两个HTML页面，其中一个包含Iframe，另一个包含iframe的内容。现在我的查询是关闭包含在按钮中的iframe包含在按钮中的div iframe。

我的主页面（父页面）包含iframe -

<div class="my">
<iframe id="contantdiv"   src="let-us-contact-you.html"  frameborder="0" name="contantdiv"></iframe>
</div>

我的子页面包含iframe的内容 -

  <!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>CATalyst</title>
    <meta name="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta http-equiv="cleartype" content="on">
    <link rel="shortcut icon" href="/favicon.ico">
    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/menu.css" type="text/css">
    <link rel="stylesheet" href="css/html5reset.css" type="text/css">
    <link rel="stylesheet" href="css/responsivegridsystem.css" type="text/css">
    <link rel="stylesheet" href="css/col.css" type="text/css">
    <link rel="stylesheet" href="css/2cols.css" type="text/css">
    <!-- All JavaScript at the bottom. -->
    <script src="js/disable-copy.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
        $.support.cors = true;
        function OnSuccess(data) {
            if (data.d) {
                alert(data.d);
            }
        }
        function Onerror(xhr, ajaxOptions, thrownError) {
            debugger;
            alert(thrownError);
            alert("Error");
        }
        //(string name,string email,string mobile,string course,string city

        function LoadPartialData() {


var name = document.getElementById('Name').value;
            var email = document.getElementById('Email').value;
            var mobile = document.getElementById('Mobile').value;
            var course = document.getElementById('course').value;
            var city = document.getElementById('city').value;

            $.ajax('http://test.endeavoursys.com/catalyst/contactus.asmx/SaveData',
            {
                beforeSend: function (xhr) { },
                complete: function () { },
                contentType: 'application/json; charset=utf-8',
                data: "{name:\"" + name + "\",email:\"" + email + "\",mobile:\"" + mobile + "\", course:\"" + course + "\",city:\"" + city + "\"}",
                dataType: 'json',
                jsonp: 'callback',
                type: 'POST',
                error: Onerror,
                success: OnSuccess
            });

    $(".my").slideUp();
            }

        // setTimeout(function () { LoadPartialData(); }, 20);

    </script>
</head>
<body style="background-color: rgba(0,0,0,0);">
<div class="my">
    <p class="formp">
        <label>
            Name:
        </label>
        <input type="text" placeholder="Name" name="Name" id="Name"></input></p>
    <p class="formp">
        <label>
            Email Id:
        </label>
        <input type="text" placeholder="Email" name="Email" id="Email"></input></p>
    <p class="formp">
        <label>
            Mobile:
        </label>
        <input type="text" placeholder="Mobile Number" name="Mobile" id="Mobile"></input></p>
    <p class="formp">
        <label>
            Course:
        </label>
        <select name="course" id="course">
            <option value="select">select</option>
            <option value="CAT">CAT</option>
            <option value="CSAT">CSAT</option>
            <option value="GMAT">GMAT</option>
            <option value="BBA">BBA</option>
            <option value="CGL">CGL</option>
        </select></p>
    <p class="formp">
        <label>
            City:
        </label>
        <select name="city" id="city">
            <option value="select">select</option>
            <option value="Delhi">Delhi</option>
            <option value="Noida">Noida</option>
        </select></p>
    <p class="formp-submit">
        <input onclick="LoadPartialData();" class="submit" type="submit" value="submit"></input></p>
</div>
</body>
</html>

Answer 1

您可以从子iframe中访问parent window object并从那里调用jquery。

替换

$(".my").slideUp();

带

parent.$(".my").slideUp();

只有通过网络服务器访问您的网页时才会有效：

localhost/yourpage.html

iframe div没有关闭子按钮点击事件

1 个答案: