确保在调用js函数之前加载div

Question

编辑：我使用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样本在我的另一个问题中找到

根据高度（垂直长度）调整大小

以下是我的搜索，我无法看到如何在我的案例中应用这些帖子中提供的解决方案，这就是为什么我要问自己。 希望我不会因为“缺乏研究”而被投票

如何在div加载时运行函数？

使用jquery从外部源加载信息后获取div的高度和宽度

提前谢谢，对不起我的英语

文件参考

http://pastebin.com/wwQumwKJ - 我的JS文件

http://pastebin.com/FnyST8iz - 我的html文件

http://pastebin.com/BYfSUjQJ - 我的css文件

除了获取数据库内容之外，我的php文件几乎就是上面发布的内容。

Answer 1

完整重新编辑答案。 由于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();
       });
   }
}

Answer 2

简短的回答

在MovePrevious()函数中，添加scaleQuote(); 在Ajax的回调中：

document.getElementById("versePlace").innerHTML=xmlhttp.responseText;
scaleQuote(); //<-- here

答案很长

您在Ajax调用上使用标准JS。 标准Ajax调用，如你的，这只是地方的响应HTML与单元内innerHTML 不执行响应文本内部的任何脚本标记。 它与jQuery的append / appendTo方法不同，后者解析响应文本中的任何script标记，并在添加到DOM时执行它。

为什么它“大部分时间”都可以工作呢？

因为你的MoveNext()函数已经有了一个scaleQuote(); 函数调用其回调内部。

Answer 3

你可以做的一件事是，将函数放在<head>标签中，并将该js函数添加到div的onload属性中。 例如

<body onload="scaleQuote()">

确保在调用js函数之前加载div

问题描述

3 个解决方案

解决方案1
2 2012-06-18 02:00:18

解决方案2
2 已采纳 2012-06-18 02:43:45

解决方案3
0 2012-06-18 02:01:13

确保在调用js函数之前加载div

问题描述

3 个解决方案

解决方案1 2 2012-06-18 02:00:18

解决方案2 2 已采纳 2012-06-18 02:43:45

解决方案3 0 2012-06-18 02:01:13

解决方案1
2 2012-06-18 02:00:18

解决方案2
2 已采纳 2012-06-18 02:43:45

解决方案3
0 2012-06-18 02:01:13