Question

我有一个奇怪的问题。以下页面是基于Google表单的自定义表单（来自：https://blog.webjeda.com/google-form-customize/）。我还添加了代码以创建自定义的“谢谢”页面，这是我认为出现问题的部分。

有时（并非总是如此），我提交表单后，Chrome完全崩溃（任务chrome.exe在taskmanager中消失了。）

我使用Sawbuck查看日志，但是没有看到致命错误。

我的Chrome浏览器版本：73.0.3683.75 在控制台中，我看不到任何错误。我曾在Internet Explorer中尝试过几次，但直到现在才崩溃。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Template</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.solodev.com/assets/pagination/jquery.twbsPagination.js"></script>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<script type="text/javascript">var submitted=false;</script>
<script type="text/javascript" >
              window.onload=function(){
                $('#pagination').twbsPagination({
                totalPages: 2,
                // the current page that show on start
                startPage: 1,

                // maximum visible pages
                visiblePages: 2,

                initiateStartPageClick: true,

                // template for pagination links
                href: false,

                // variable name in href template for page number
                hrefVariable: '{{number}}',

                // Text labels
                first: 'First',
                prev: 'Prev',
                next: 'Next',
                last: 'Last',

                // carousel-style pagination
                loop: false,

                // callback function
                onPageClick: function (event, page) {
                  $('.page-active').removeClass('page-active');
                  $('#page'+page).addClass('page-active');
                },

                // pagination Classes
                paginationClass: 'pagination',
                nextClass: 'next',
                prevClass: 'prev',
                lastClass: 'last',
                firstClass: 'first',
                pageClass: 'page',
                activeClass: 'active',
                disabledClass: 'disabled'
                });
            }
</script>

<style>
.answer {
    margin: 15px 0 15px 0px;
}

label {
    color: #4ca950;
}

h1 {
    font-size: 28px;
    border-bottom: 1px solid #4ca950;
    padding-bottom: 6px;
}

.container {
  margin-top: 20px;
}

.page {
  display: none;
}

.page-active {
  display: block;
}
.pagination li {
    width: auto;
    height: auto;
    padding: 1px 1px;
}
.pagination li a {
    border: 1px solid #4ca950;
    border-radius: 4px;
}
.pagination li:hover {
    background-color: #4ca950;
}
.pagination li a:hover {
    color: #FFF;
}

.pagination li.next, .pagination li.prev {
    width: auto;
}
.pagination li.active {
    background-color: #4ca950;
    border-radius: 4px;
}
.btn {
    background-color: #4ca950;
}

@media all and (max-width: 1024px) {
        body {
        font-size: 18px;
        }
        .pagination li a {
            font-size: 20px;
        }
}
</style>
</head>
<body>

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted)  { window.location='thankyou.php'; }"></iframe>

    <div class="container">
        <form action="https://docs.google.com/forms/d/e/xxxxx/formResponse" class="form"  target="hidden_iframe" onsubmit="submitted=true;">
        <div class="title col s12"><h1>Form</h1></div>
            <div class="page" id="page1">
                Hi, this is a test.
            </div>

            <div class="page" id="page2">
                <div class="col s12">
                    Yes or no?
                    <div class="answer col s12">
                        <label><input type="radio" name="entry.1276429181" value="Yes" class="with-gap"/><span>Yes</span></label><br>
                        <label><input type="radio" name="entry.1276429181" value="No" class="with-gap"/><span>No</span></label>
                    </div>
                </div>
                <div class="col s12">
                    Input text
                    <div class="answer col s12">
                         <textarea id="textarea1" class="materialize-textarea" name="entry.47775240" placeholder="Text.."></textarea>
                    </div>
                </div>              

                <div class="col s12">
                    <button class="btn waves-effect waves-light" type="submit" name="action">Send
                        <i class="material-icons right">send</i>
                    </button>
                </div>
            </div>
                <div class="col s12">
                    <ul id="pagination" class="pagination-lg pull-right"></ul>
                </div>
            </form>
    </div>
    <!--JavaScript at end of body for optimized loading-->
    <script type="text/javascript" src="js/materialize.min.js"></script>

</body>

</html>

thankyou.php仅包含以下内容：

<html>
    <head>
    <meta charset="UTF-8">
    <title>Template</title>
</head>

<body>Thank you!</body>

</html>

Answer 1

Afaik脚本标签应放在头部或身体中，但您的标签应位于两者之间。可能只是一个猜测，但这可能导致浏览器做出错误的解释。

JavaScript使Chrome浏览器崩溃了吗？

1 个答案: