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' }); 

これは、ライトボックス負荷に以下の原因：

私の問題は、私は準備ができてドキュメント内のライトボックスのタイトルを設定/変更することはできませんということです。 以下のコードでは、ドキュメントレディ機能がライトボックスによって読み込まれるコントロールにあります。

- 最初のアラートがnullに戻り、2番目のアラートが何も返されません。

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

私はChromeの開発ツールを使用して、ドキュメント準備がcommon.jsに走っていることを確認してから、その後すぐ文書は、ライトボックスにロードされる制御で実行されます。

私はタイトルをフェッチしてloadLightbox関数のパラメータとして渡すことができますが、余分な負荷を防止しようとしています。今見ている方法とは違ったスタイルにしたいと思います。あなたがloadLightBox()を呼び出すまで、それはDOMに存在しないため

おかげ

Answer 1

あなたはdiv要素にアクセスすることはできません。

あなたのライトボックスは、iframe内に読み込まれているので、あなたはSomeControl.ascxにdocument.ready機能から、このような何かを行うことができる必要があります：

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