Не удается получить доступ к div в documentReady () - PullRequest
3 голосов
/ 02 февраля 2012

Итак, у меня есть лайтбокс, который динамически загружается из файла 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' });

Это приводит к загрузке светового окна ниже: enter image description here

Моя проблема в том, что я могу 't установить / изменить заголовок лайтбокса в документе готово.В приведенном ниже коде функция Document Ready находится в элементе управления, который загружается в лайтбокс.

-Первое предупреждение возвращается с нулевым значением, а второе возвращается с нулевым значением.

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

Я использовал инструменты разработчика Chrome и убедился, что готовый документ запущен в common.js изатем готовый документ запускается в элементе управления, который загружается в лайтбокс.

Я знаю, что могу извлечь заголовок и передать его в качестве параметра в функцию loadLightbox, но я пытаюсь предотвратить дополнительную загрузку, и я хотел бы стилизовать его не так, как выглядит сейчас.

Спасибо

1 Ответ

4 голосов
/ 02 февраля 2012

Вы не можете получить доступ к div, потому что он не существует в DOM, пока вы не позвоните loadLightBox().

Поскольку ваш лайтбокс загружается в iframe, вы должны быть в состоянии сделать что-то подобное с помощью функции document.ready в вашем SomeControl.ascx:

$("#lightBoxTitle", top.document).text("My new title");

...