jquery 操作外部iframe

最新推荐文章于 2022-09-29 21:45:00 发布

不断学习的ITer

最新推荐文章于 2022-09-29 21:45:00 发布

阅读量2.5k

点赞数

分类专栏： Jquery/Javascript 文章标签： jquery iframe function div filter class

本文链接：https://blog.csdn.net/wyqlxy/article/details/7222172

版权

Jquery/Javascript 专栏收录该内容

103 篇文章 0 订阅

订阅专栏

实验内容：

图片显示页面：页面显示图片列表，点击每张图片的时候，会在当前窗口显示一张大图片（背景是半透明遮罩层）。类似：http://blueimp.github.com/jQuery-Image-Gallery/

要求：将该页面放入iframe内部，并可以将大部片显示在iframe所在的页面上

NOTE：一般的做法，iframe 内部的操作时不会影响iframe以外的区域的（比如：遮罩层只会遮住iframe内部区域，并不会遮住整个屏幕）

解决思路

在子页面通过js操作父页面的元素，实现遮罩和显示图片的功能。

var OverLay = {};
OverLay.Set = function () {
    var parentFrame = window.parent.document;

    $(parentFrame).find("body").append("<DIV style=\"Z-INDEX: 1001;left:0;top:0; display:none; position:absolute;  background-color:rgb(43, 41, 34); filter:Alpha(Opacity=90);Opacity:0.9; \" class=\"ui-widget-overlay\" id=\"parentoverlay\"></DIV>");
    $(parentFrame).find("body").append("<DIV style=\"Z-INDEX: 1002; WIDTH: auto; HEIGHT: auto;position:absolute;left:321px;top:110px;display:none\"  id=\"imageshow\"><img src=\"\" id=\"bigimage\" width=\"583px\" height=\"583px\"/></DIV>");

    var parentOverlay = $(parentFrame).find("#parentoverlay");
    var parentImageShow = $(parentFrame).find("#imageshow");

    //get window's width&height px
    parentOverlay.get(0).style.width = $(window.parent).width() + "px";
    parentOverlay.get(0).style.height = $(window.parent).height() + "px";
    $("#gallery").find("a").click(function () {
        //                alert($(this).get(0).title);

        parentOverlay.show();
        parentImageShow.find("#bigimage").attr("src", $(this).get(0).href);
        parentImageShow.show();
    });
    parentOverlay.click(function () {
        $(this).hide();
        parentImageShow.hide();
        parentImageShow.find("#bigimage").attr("src", "");
    });

};

注意：得到父页面的语句。而且所有的DIV样式要直接显示在代码行里，不能存放在单独的css文件中，否则无法影响父页面。

最终效果图片：