確保在調用js函數之前加載div
[英]Ensure that div is loaded before calling js function
問題描述
編輯：我使用ajax加載我的內容中的文本，這就是為什么onload on head不適用。
我在這里有一個幾乎完整的項目http://sandbox.littlegraffyx.com/bible/test2.html （在左下角輸入gen 1：1開始）
我唯一的問題是確保在我調用一個將自動調整窗口上的文本內容的函數之前，顯示主文本的主要div已完全加載。
有時我的自動調整功能正在工作，有時它不是，而且我能想到它為什么不工作的唯一原因可能是當我調用函數時div還沒有完全加載。
echo "<div id=\"verse\">" . $bcontent . "</div>";
echo "<script type='text/javascript'>
scaleQuote();";
echo "</script>";
scalequote樣本在我的另一個問題中找到
以下是我的搜索，我無法看到如何在我的案例中應用這些帖子中提供的解決方案，這就是為什么我要問自己。 希望我不會因為“缺乏研究”而被投票
提前謝謝，對不起我的英語
文件參考
http://pastebin.com/wwQumwKJ - 我的JS文件
http://pastebin.com/FnyST8iz - 我的html文件
http://pastebin.com/BYfSUjQJ - 我的css文件
除了獲取數據庫內容之外，我的php文件幾乎就是上面發布的內容。
3 個解決方案
解決方案1
2 2012-06-18 02:00:18
完整重新編輯答案。 由於JQuery庫已經存在於您的頁面中，因此這一點毫無用處：
/* Function to get Requested Verse */
function showVerse(str)
{
if (str=="")
{
document.getElementById("versePlace").innerHTML="";
... etc etc.
xmlhttp.open("GET","getverse.php?q="+str,true);
xmlhttp.send();
}
只需更換它
function showVerse(str)
{
$("#versePlace").html("");
$('#versePlace').load('getverse.php?q='+str, function() {
scaleQuote();
});
}
因此，我們在回調函數中移動scaleQuote() 。
原因是：
scaleQuote()函數現在在原始HTML頁面中調用，你的第一個問題是，如果你在AJAX結果中輸出一個腳本，它將不會被執行！第二個主要問題是僅在AJAX請求完成后調用scaleQuote（）函數。 AJAX中的“A”表示“異步”，它大致意味着調用者繼續執行它，無論請求是否完成。
所以我們必須確保在AJAX請求 - 響應完成后調用scaleQuote() 。
JQuery的.load()函數調用一個AJAX頁面並將結果放在括號中的元素中（ $("#versePlace") ，其中＃代表“id”）。 您通過GET方法使用對象{q: str}傳遞數據，然后定義一個回調函數 ，該函數 保證僅在Ajax的請求 - 響應事件完成后運行。
其他功能可以通過JQuery減少很多：
/* Function to get Next Verse */
function MoveNext()
{
var str = parseInt($("#txtCurrent").val()) + 1;
if (str!="")
{
$("#versePlace").html("");
$('#versePlace').load('move.php?q='+str, function() {
scaleQuote();
});
}
}
解決方案2
2 已采納 2012-06-18 02:43:45
簡短的回答
在MovePrevious()函數中，添加scaleQuote(); 在Ajax的回調中：
document.getElementById("versePlace").innerHTML=xmlhttp.responseText;
scaleQuote(); //<-- here
答案很長
您在Ajax調用上使用標准JS。 標准Ajax調用，如你的，這只是地方的響應HTML與單元內innerHTML 不執行響應文本內部的任何腳本標記。 它與jQuery的append / appendTo方法不同，后者解析響應文本中的任何script標記，並在添加到DOM時執行它。
為什么它“大部分時間”都可以工作呢？
因為你的MoveNext()函數已經有了一個scaleQuote(); 函數調用其回調內部。
解決方案3
0 2012-06-18 02:01:13
你可以做的一件事是，將函數放在<head>標簽中，並將該js函數添加到div的onload屬性中。 例如
<body onload="scaleQuote()">
加載div后調用js函數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.