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样本可以在我的另一个问题中找到

Adjust size based on height (vertical length)

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

How do I run a function only when a div gets loaded?

getting the height and width of a div after loading info into it from an external source with jquery

提前致谢并抱歉我的英语

文件参考

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()函数中，在Ajax的回调中添加scaleQuote();：

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 个答案: