Question

我制作了一个书签。这包含2个div（覆盖和iframe的div）和iframe。在这个iframe中，我加载一个页面，以便有人可以从该URL获取图像并将其保存到数据库中。保存图片后，我希望书签关闭。

我的书签js：

 (function(){

var v = "1.3.2";

if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
    var done = false;
    var script = document.createElement("script");
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
    script.onload = script.onreadystatechange = function(){
        if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
            done = true;
            initMyBookmarklet();
        }
    };
    document.getElementsByTagName("head")[0].appendChild(script);
} else {
    initMyBookmarklet();
}

function initMyBookmarklet() {
    (window.myBookmarklet = function() {

        if ($("#wikiframe").length == 0) {
            var s = window.location.href;
            if ((s != "") && (s != null)) {
                $("body").append("\
                <div id='wikiframe'>\
                    <div id='wikiframe_veil' style=''></div>\
                    <iframe src='http://test.itemmized.com/iframe.php?&search="+s+"' onload=\"$('#wikiframe iframe').slideDown(500);\" scrolling='no'>Enable iFrames.</iframe>\
                    <style type='text/css'>\
 #wikiframe_veil { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background:url('http://www.itemmized.com/img/popup/overlay.png') repeat 0 0; cursor: pointer; z-index: 9999; }\
                        #wikiframe iframe { display: none; position: fixed; top: 30px; right: 30px; overflow:hidden; width: 472px; height: 412px; z-index: 99999; background:#FFF; border: 5px solid rgba(0,0,0,.5); margin: -5px 0 0 -5px; }\
                    </style>\
                </div>");
                $("#wikiframe_veil").fadeIn(750);
            }
        } else {
            $("#wikiframe_veil").fadeOut(750);
            $("#wikiframe iframe").slideUp(500);
            setTimeout("$('#wikiframe').remove()", 750);
        }
        $("#wikiframe_veil").click(function(event){
            $("#wikiframe_veil").fadeOut(750);
            $("#wikiframe iframe").slideUp(500);
            setTimeout("$('#wikiframe').remove()", 750);
        });
    })();
}

 })();

在iframe中调用ajax之后的

函数：

 function myresult1(result) {
var result_lines = result.split("<splitter>");    
if (result_lines[0] == '1') { 
    $("#loading").html('<img src="../img/common/loader.gif"/>').fadeOut(250);
    $('#content_error').html(result_lines[1]).fadeIn(250);
    $('#content_error').delay(1500).fadeOut(500);
} else if (result_lines[0] == '2') { 
    $("#loading").html('<img src="../img/common/loader.gif"/>').fadeOut(250);
    $('#content_success').html(result_lines[1]).fadeIn(250);
    $('#content_success').delay(1500).fadeOut(500);
    $('#form_url').attr('value', '');
    $('#url_result').delay(500).fadeOut(500);
}
return true;

所以当在ajax调用之后调用该函数时，我想关闭2个div（包括iframe）。我怎么能用jquery做到这一点？

Answer 1

使用windows.top.postMessage：

解决了这个问题

我已将此添加到bookmarklet.js：

            var receiveMessage = function(event) {
            if ("close-iframe" == event.data) {
                $("#wikiframe_veil").fadeOut(750);
                $("#wikiframe iframe").slideUp(500);
                setTimeout("$('#wikiframe').remove()", 750);
            }
        }
        window.addEventListener("message", receiveMessage, false);

这是iframe：

            setTimeout(function() { window.top.postMessage("close-iframe", "*");}, 2500);

提交表单后关闭bookmarklet

1 个答案: