iframe div 未在子按钮单击事件上关闭答案

【问题标题】：iframe div not closing on child button click eventiframe div 未在子按钮单击事件上关闭
【发布时间】：2013-12-03 15:34:31
【问题描述】：

我有两个 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>

【问题讨论】：

标签： jquery html css ajax iframe

【解决方案1】：

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

替换

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

与

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

这只有在您通过网络服务器访问您的页面时才有效，即：

localhost/yourpage.html

【讨论】：

在按钮单击处理程序内的子 iFrame 中
我可以关闭指定所有控件的 div，但仍然存在不隐藏的 div。
parent.$(".my").slideUp() 应该隐藏包含 iFrame 的 div，是这样吗？
No Eru 那没有发生。相反，正在关闭的 div 也没有关闭。
嗯，你能告诉我 window.parent.getElementById('contantdiv') 返回什么吗？当代替 parent.$(".my").slideUp(); 调用时；