无法访问 documentReady() 中的 div

Question

所以我有一个从 common.js 文件动态加载的灯箱。 （我一直在使用的遗留代码）

我在 common.js 文件

//dynamically load a light box to he page
// @src - is the URL to load in the lightbox
// @hidePDFLink - is a boolean value indicating if PDF link should be hidden
// @imagePath - is the image path for the pdf link
function loadLightBox(src, options) {
    options = $.extend({ pdfSrc: null, width: Math.min(820, $(window).width() - 20), height: $(window).height() * 0.90, title: null }, options);

//LOAD IT
if ($("#lightBox").length == 0) {//create light box if it doesn't exist
    $("body", $(document)).append($('<div id="lightBoxOverlay" /><div id="lightBox"><div id="lightBoxToolbar"><div id="lightBoxTitle" /><div id="lightBoxCloseLink" title="Close" /><div id="lightBoxPrintPDFLink" title="Create PDF">Create PDF</div></div><iframe id="lightBoxFrame" scrolling="auto" frameborder="0" onload="showWaitCursor(false)" /><div id="lightBoxContent" /></div>'));

    $('#lightBox')[0].hideFunction = (options.removeOnClose == true) ?
        function () {
            $(document).unbind("keyup", $('#lightBox')[0].escapeFunction);
            $('#lightBox, #lightBoxOverlay').empty().remove();
            showWaitCursor(false);
            return false;
        } :
        function () {
            $("#lightBox").hide();
            $("#lightBoxOverlay").hide();
            $("IFRAME", "#lightBox").attr("src", "about:blank");
            $('#lightBoxContent').html('');
            $(document).unbind("keyup", $('#lightBox')[0].escapeFunction);
            showWaitCursor(false);
            return false;
        }

    $('#lightBox')[0].escapeFunction = function (event) {
        if (event.keyCode == 27)
            $('#lightBox')[0].hideFunction();
    }

    $("#lightBoxCloseLink").click($('#lightBox')[0].hideFunction);
    $("#lightBoxPrintPDFLink").click(function () {
        window.document.location = $(this).attr('pdfSrc');
        return false;
    });

    // apply bgiframe if available
    if ($.fn.bgiframe)
        $('#lightBox').bgiframe();
}
setLightBoxOptions(options);

//set source
if (!(options.srcContent)) {
    showWaitCursor(true);
    $("#lightBoxFrame").attr("src", src);
}

}

function setLightBoxOptions(options) {

    if (options.pdfSrc)
        $("#lightBoxPrintPDFLink").attr('pdfSrc', options.pdfSrc).show();
    else
        $("#lightBoxPrintPDFLink").hide();

    if (options.title)
        $("#lightBoxTitle").text(options.title);

    if (options.width) {
        $("#lightBoxFrame, #lightBoxContent").width(options.width - 20);
        $('#lightBoxToolbar', $('#lightBox')).width(options.width);
    }

    if (options.height)
        $("#lightBoxFrame, #lightBoxContent").height(options.height - $('#lightBoxToolbar', $('#lightBox')).height());

    if (options.srcContent) {
        $('#lightBoxContent').html(options.srcContent);
        if (!(options.width)) $('#lightBox').width($('#lightBoxContent').width());
    }

    //set position of lightbox
    var isIE6 = false;
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x;
        var ieversion = new Number(RegExp.$1) // capture x.x portion and store as a number
        if (ieversion >= 6 && ieversion < 7)
            isIE6 = true;
    }
    $("#lightBox").css({
        left: $(window).width() / 2 - $("#lightBox").width() / 2 + (isIE6 ? $(window).scrollLeft() : 0), // account for scrolling
        top: $(window).height() / 2 - $('#lightBox').height() / 2 + (isIE6 ? $(window).scrollTop() : 0)// account for scrolling
    });
}

common.css:

/*** BEGIN STYLES FOR LIGHTBOX ***/
#lightBoxOverlay 
{
    position:fixed;
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;
    display:none;
    opacity: 0.5;
    filter: alpha(opacity=50);
    background-color:#666;
    z-index:2998;
}
#lightBox 
{
    display:none;
    position:fixed;
    top: 5%;
    border:solid 1px black;
    background-color:#fff;
    -moz-box-shadow: 3px 3px 3px #666;
    -webkit-box-shadow: 3px 3px 3px #666;
    z-index:2999;
}
#lightBox iframe 
{
    /*width: 800px;*/
    margin: 0 10px 10px 10px;
}
#lightBox #lightBoxToolbar 
{
    margin-top:10px;
    /*width: 820px;*/
    height: 26px;
}
#lightBox #lightBoxPrintPDFLink
{
    float: right;
    background: url(images/icon_pdf.gif) no-repeat right;
    cursor:pointer;
    margin-right:5px;
    width: 90px;
    height: 16px;
    white-space:nowrap;
}
#lightBox #lightBoxCloseLink
{
    float: right;
    background: url(images/icon_x2.gif) no-repeat center;
    cursor:pointer;
    margin-right:10px;
    width: 16px;
    height: 16px;
}
#lightBox #lightBoxTitle
{
    float: left;
    margin-left:10px;
    height: 16px;
    font-weight:bold;
}
/*** END STYLES FOR LIGHTBOX ***/

中有这个函数，并且这个函数调用上面的函数：

var url = 'aUrl/SomeControl.ascx';
loadLightBox(url, { width: 640, height: 575, title:'TestTitle' });

这​​会导致下面的灯箱加载：

我的问题是我无法在准备好的文档中设置/更改灯箱的标题。 在下面的代码中，Document Ready 函数位于由灯箱加载的控件中。

- 第一个警报返回 null，第二个警报返回任何内容。

alert(document.getElementById('lightBoxTitle'));
alert($('#lightBoxTitle').text());
$('#lightBoxTitle').text('IM A NEW TITLE THAT SHOULD BE SET');

我使用了 chrome 的开发人员工具并验证了文档就绪在 common.js 中运行，然后文档就绪在加载到灯箱中的控件中运行。

我知道我可以获取标题并将其作为 loadLightbox 函数中的参数传递，但我试图防止额外的加载，并且我希望将其样式设置为与现在不同的样式。

谢谢

Answer 1

您无法访问该 div，因为在调用 loadLightBox() 之前它并不存在于 DOM 中。

由于您的灯箱正在 iframe 中加载，因此您应该能够从 SomeControl.ascx 中的 document.ready 函数执行类似的操作：

$( "#lightBoxTitle", top.document).text("我的新标题");