1

编辑:我使用 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 文件几乎就是上面发布的内容。

4

3 回答 3

2

完全重新编辑答案。 由于 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”表示“异步”,大致意思是调用者不管请求是否完成都继续执行。

所以我们必须确保scaleQuote()在 AJAX 请求响应完成后调用。

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();
       });
   }
}
于 2012-06-18T02:00:18.357 回答
2

简短的回答

在您的MovePrevious()函数中,scaleQuote();在 Ajax 的回调中添加:

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

长答案

您在 Ajax 调用中使用标准 JS。像您这样的标准 Ajax 调用,它只是将响应HTML放置在一个元素中,而不innerHTML执行响应文本中的任何脚本标记。它与 jQuery 的/方法不同,后者解析响应文本中的任何标签并在添加到 DOM 时执行它。appendappendToscript

为什么它“大部分时间”都有效呢?

因为您的函数在其回调中MoveNext()已经有一个函数调用。scaleQuote();

于 2012-06-18T02:43:45.677 回答
0

您可以做的一件事是将函数放在<head>标签中,然后将该 js 函数添加到onloaddiv 的属性中。例如

<body onload="scaleQuote()">
于 2012-06-18T02:01:13.083 回答