javascript-无法在documentReady()中访问div

因此,我有一个灯箱,该灯箱是从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" onl oad="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' });

这将导致下面的灯箱加载：

我的问题是我无法在准备好的文档中设置/更改灯箱的标题.
在下面的代码中,文档就绪功能位于灯箱加载的控件中.

-第一个警报返回null,第二个警报则什么也没有返回.

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

我使用了chrome的开发人员工具,并验证了common.js中是否已准备好文档,然后在加载到灯箱中的控件中运行了文档准备就绪.

我知道我可以获取标题并将其作为参数在loadLightbox函数中传递,但是我正试图防止额外的负担,因此我希望将其样式设置为不同于现在的外观.

谢谢

解决方法:

您无法访问div,因为在调用loadLightBox()之前DOM中不存在该div.

由于您的灯箱已加载到iframe中,因此您应该能够从SomeControl.ascx中的document.ready函数中执行以下操作：

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

标签：document-ready,css,javascript,jquery
来源： https://codeday.me/bug/20191101/1985910.html