用户从另一个页面导航到该页面后如何在目标页面上触发 JavaScript 事件

Question

当我转到其他页面时如何触发 javascript（或 jquery）事件？

例如：

• 我在 index.html
• 在index.html，我点击了contact.html链接；
• 当我进入contact.html页面时，我需要触发一个事件

感谢您的关注

编辑：

我会尝试用其他方式解释：

我正在使用 RubyOnRails。我有一个可以添加联系人的页面。有很多字段，但在这个例子中我只使用两个：

<select name='type' id='type_select'>
    <option value='0'></option>
    <option value='1'>Home</option>
    <option value='2'>Work</option>
</select>
<input type="text" name="contact_name" id="contact_name_input">

在我的 Javascript 上，我有：

// this only works if I press CTRL+F5 to refreash the page
$(document).ready(function(){
    $("#contact_name_input").hide();
});
// This Works fine
$('#type_select').change(function(){
    if ($(this).val() == 1 || $(this).val() == 2){
        $("#contact_name_input").show();
    } else {
        $("#contact_name_input").hide();
    }
});

换句话说，我需要的是在用户访问页面时隐藏输入字段，并仅在他选择了有效类型时才显示。

我希望更清楚

感谢您的关注

Answer 1

您似乎希望在目标页面上触发一个事件（在用户单击链接之后）并被带到目标页面。如果是这种情况，并且您想触发特定事件，正如其他人所建议的那样，您的第一个入口点可能是新页面的 document.ready，您可以使用查询字符串来指定更具体的事件。

在 Index.html 上

<a href="contact.html?e=1">Contact</a>

在 Contact.html 上

<script type="text/javascript">
    $(function() {

        $(document).bind("myCustomEvent", function(e, data) {
            alert("Weee, you triggered event id: " + data.EventId + "!");
        });

        var eventId = getParameterByName('e');  // Load the query string specified by the previous page's link
        if(eventId == 1) {
            $(document).trigger("myCustomEvent", {EventId: eventId});
        } else {
        } // end if/else
    });

    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
</script>

Credit -- Javascript QueryString 函数无耻地取自这里： How can I get query string values in JavaScript?

在聊天中发布@xDaevax 给出的解决方案：

通过在 $(document).ready(); 上使用 JQuery；要隐藏输入，您有时会看到闪烁。 您可能需要考虑在输入中添加一些 CSS 以隐藏它 然后，当您访问该页面时，它将始终被隐藏。 当你使用 JQuery 的 show() 和 hide() 时，它们会根据你调用 show() 还是 hide() 将“display”css 属性从“display: block”更改为“display: none” 因此，在您的 javascript 中，您可以尝试：

$("#type_select").change(function(e) {
    var selectedValue = $(this).val();
    if(selectedValue <= 0) {
        $("#contact_name_input").hide();
    } else {
        $("#contact_name_input").show();
    }
});

对我有用