仅限 iOS 的问题：通过 AJAX 加载的带有 <script> 的 HTML 不会执行

Posted 2023-03-14

【中文标题】仅限 iOS 的问题：通过 AJAX 加载的带有 <script> 的 HTML 不会执行

【英文标题】：iOS-only issue: HTML with <script> loaded via AJAX won't execute

【发布时间】：2017-12-25 19:05:47

【问题描述】：

下面的代码应该做的是在content-container div 中加载innerStuff.html。然后，innerStuff.html 中另一个名为submit_entry() 的脚本用于提交innerStuff.html 的表单。

我得到了什么：当按钮被点击时，innerStuff.html 中的submit_entry()（通过 AJAX 加载）将在任何浏览器上执行，iOS 上的浏览​​器除外。

据我所知，这是我在 iOS 上唯一能遇到的问题。使用任何其他平台时，该功能均有效。

index.html

//Normal HTML stuff above
<div id="content-container"></div>
//Normal HTML stuff
<script>
getStuff = function(filename)
    $.ajax(
        type: "POST",
        url: "https://website.com/ajax/",
        data: 
            'name': filename
        ,
        success : function(data)
            $('#content-container').animate(opacity: '0', 250, function()$('#content-container').html(data););
            $('#content-container').animate(opacity: '1', 250);
        
    );
;

getStuff('innerStuff'); //Gets innerStuff.html
</script>

innerStuff.html

<div id="form-container">
    <form enctype="multipart/form-data" method="post" id="form">
        //Normal form stuff here (>5 elements)
    </form>
    <button id="submit-btn" onclick="javascript:submit_form();">Submit</button>
    <script>
        form['2'].value = "Something"; //The default value (the form has >5 elements, and is the only form on the website)
        submit_form = function() 
            alert("Submitting form. Please wait...");
            $.ajax(
                url : "https://website.com/submitform/",
                type : "POST", // https method
                data : new FormData(form),
                contentType: false,
                processData: false,

                // handle a successful response
                success : function(json) 
                    if(json['result'] == 'error')
                        alert(json);
                    
                    else
                        alert('Submission successfull!');
                    
                ,

                // handle a non-successful response
                error : function(xhr,errmsg,err) 
                    if(xhr.status == 0)
                        alert("We can't seem talk to the server.\nPlease reconnect and try again.");
                    
                    else
                        alert("Oops! We have encountered an error: " + xhr.status + "\nDetails: " + xhr.responseText);
                    
                
            );
        ;
    </script>
</div>

【问题讨论】：

试试window.onload = function() getStuff('innerStuff');

@AndreiTodorut getStuff() 工作得很好。 submit_form() 这就是问题所在。

【参考方案1】：

尝试将按钮光标设置为像这样的指针。

#submit-btn cursor: pointer;

我知道这听起来很奇怪，但 ios 的 onClick() 存在奇怪的错误；

【讨论】：

去掉javascript前缀和分号，没必要。所以 Javascript:onClick() 应该是 onClick()。

【参考方案2】：

试试这个：

<script>
getStuff = function(filename)
    $.ajax(
        type: "POST",
        url: "https://website.com/ajax/",
        data: 
            'name': filename
        ,
        success : function(data)
            $('#content-container').animate(opacity: '0', 250, function()
				$('#content-container').html(data);
				/* Add this */
				var arr = $('#content-container')[0].getElementsByTagName('script')
				for (var n = 0; n < arr.length; n++)
				eval(arr[n].innerHTML)
			);
            $('#content-container').animate(opacity: '1', 250);
        
    );
;

getStuff('innerStuff'); //Gets innerStuff.html
</script>

【讨论】：

使用这个，iOS 浏览器根本不会在表单中加载。相反，我得到的只是表格曾经所在的空白区域。