从缓存加载网页时 JavaScript 不执行

Question

请参阅更新 3 了解最新状态。我从我的 dojo 脚本中收到错误“尝试使用 id==contact-form 注册小部件，但该 id 已注册”。这个问题之前已经在这里出现过。我相信我的情况可能会有所不同。当我从网站上的一个页面转到另一页面时，我收到错误消息。所有页面都有相同的脚本。如果我重新加载页面，就不会收到错误消息。如果我访问另一个网站然后再回来，我就不会收到错误消息。我的网站曾经使用 Symfony 框架。我刚刚将其转换为 Ruby on Rails。我很确定 Symfony 没有这个问题，但我并不肯定。我今天早上刚刚将名称服务器更改为新版本，因此无法验证。该网站是amcolan.info 。如果您点击链接，它应该可以在第一页上正常工作。将鼠标悬停在图像上进行测试。它应该放大。

这是实例化小部件的脚本:

require(["dojo/dom",
        "dojo/request",
        "dojo/dom-form",
        "dijit/Dialog",
        "dijit/form/Form",
        "dijit/form/TextBox",
        "dijit/form/ValidationTextBox",
        "dijit/form/Textarea",
        "dijit/form/Button",
        "dojox/validate/web",
        "dojo/domReady!"],
      function(dom, request, domForm, Dialog, Form, TextBox, ValidationTextBox, TextArea, Button ){

        alertDialog = new Dialog({
          title: "Email Result",
          content: "<p>No Content</p>",
          sytle: "width: 50em"
        });

        emailDialog = new Dialog({
          title: "Email Form",
          content: dom.byId("emailFormHTML").textContent,
          style: "width: 50em"
        });

        emForm = new Form({
        },"contact-form");

        toText = new TextBox({
          name: "addressee",
          readOnly: "readOnly",
          value: "Staff"
        },"to");

        nameText = new ValidationTextBox({
          name: "name",
          placeholder: "Your Name",
          required: "true",
          missingMessage: "We'd like to know who you are."
        },"name");

        emailText = new ValidationTextBox({
          name: "email",
          placeholder: "Your email",
          validator: dojox.validate.isEmailAddress,
          invalidMessage: "This is not a valid email address!"
        },"email");

        messageText = new TextArea({
          name: "message",
          placeholder: "Your message"
        },"message");

        sendBtn = new Button({
          label: "Send",
          onClick: function(){
            if (emForm.validate() == true){
              // Post the data to the server
              request.post("<%= contact_create_path %>",
                      {data: domForm.toObject("contact-form"),
                        // Wait 2 seconds for a response
                        timeout: 4000

                      }).then(function(response){
                        emailDialog.hide();
                        alertDialog.set("content", response)
                        alertDialog.show();
                      });
            }
          }
        },"submit-btn");
      });
</script>

如果我注释掉联系表单小部件，它会在下一个小部件上出错。这可能与 Rails 处理页面的方式有关吗？

更新

在创建小部件之前，我能够通过测试小部件来治疗该症状:

        emform = registry.byId("contact-form");
        if (!emform){
          emForm = new Form({
          },"contact-form");}

一旦我对所有小部件执行了此操作，该错误就消失了。该修复可能会导致其他问题。我仍然想知道为什么我会遇到这个问题。我是否错过了一些关于保留小部件的基本 Javascript 或 dojo 概念？

更新2

我以为我可以正常工作了，但是没有。我不再收到任何错误。从网站上的另一个页面导航时，我仍然遇到 Javascript 未执行的问题。同样，如果我重新加载页面或从另一个网站输入，它就可以正常工作。这是启用页面底部联系链接的 Javascript:

require(["dojo/on",
    "dojo/dom",
    "dojo/mouse",
    "dojo/dom-style",
    "dojo/domReady!"],
function(on, dom, mouse, style)
{
    var emailLink = dom.byId("emailClickable");

    on(emailLink, "click", function(evt){
        toText.set("value","Site Administrator");
        emailDialog.show();
    });
    on(emailLink, mouse.enter, function(evt){
        style.set(emailLink, "cursor", "pointer")
    });
});

更新3

我将 console.info 语句放在所有 javascript 函数中。当我在网站中逐页浏览时，我看不到任何消息。我还在 Firebug Net 选项卡中注意到，只有从缓存加载页面时才会出现该问题。

Answer 1

您的小部件需要其他小部件才能完全启动和初始化(联系表单)。在这种情况下，您应该启动您的小部件，直到所有其他 dojo 小部件完成加载并初始化页面上的所有小部件。

因此，将 "dojo/domReady!" 替换为 "dojo/ready" 并将其全部包装在 Ready 函数中。欲了解更多信息，请查看dojo guide on dojo/ready here .