iPad ios 8.4 中不触发窗口加载事件

Posted 2023-02-18

【中文标题】iPad ios 8.4 中不触发窗口加载事件

【英文标题】：Window onload event does not fire in iPad ios 8.4

【发布时间】：2015-10-23 00:47:21

【问题描述】：

我遇到了以下奇怪的问题：

功能： 当我打开包含许多图像并使用 javascript/jQuery 用于客户端功能的网站页面时。单击每个图像时，所有其他图像都会更改其不透明度，并且所选图像会显示一个 <div>，其中包含该图像的一些信息和一个视频。

我使用了 jQuery 揭幕，它仅在页面上触发滚动事件后加载所有图像。在此之前，它会显示“加载”图像。 我在window.onload 事件上添加了一个Javascipt，以在单击图像时调整<div> 元素的大小。以及一些识别浏览器并相应设置视频标签源的Javascript。 所有图像都在数据列表中呈现，并从数据库绑定。 由于仅在滚动事件之后才加载图像，因此我在页面加载时添加了一个代码，以人工将页面滚动一个像素。

问题： 我在 Chrome 或 Safari 上的 iPad(ios 8.4) 中打开相同的页面。我在window.onload 下的所有Javascript 都不会触发。

ASPX 页面：

<script type="text/javascript" src="/js/jquery.unveil.js"></script>
<asp:DataList ID="dlPersonList" runat="server" OnItemDataBound="dlPersonList_OnItemDataBound"
RepeatDirection="Horizontal" RepeatLayout="Flow">
  <ItemTemplate>
    <div class="itemImage">
       <asp:HyperLink ID="hypPersonPicture" runat="server">
            <asp:Image ID="imgPersonPicture" runat="server" CssClass="lazy" />
       </asp:HyperLink>
    </div>
    <asp:Panel class="person-detail" ID="pnlpersonDetail" runat="server">
       <div class="person-content detailView">
        <%--Some text and other controls--%>          
        <asp:Panel ID="pnlVideo" runat="server">
            <div class="video-content">
                  <video id="personVideo" controls="controls" preload="none"> 
                        <%--Video source elements--%> 
                  </video>
            </div>
        </asp:Panel>
       </div>
   </asp:Panel>
  </ItemTemplate>
</asp:DataList>

CS 代码：

protected void Page_Load(object sender, EventArgs e)

    if (!IsPostBack)
    
        //Bind data list 
        dlPersonList.DataSource = SelectPersons();
        dlPersonList.DataBind();
        // Register the script for slide up effect            
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "scriptPerson", @"$(document).ready(function () 
                                                        jWDScrollWindow(););",
                                                        true);
    
 
protected void dlPersonList_OnItemDataBound(Object sender, DataListItemEventArgs e)

    /*Lazy loading functionality*/
    //Set the image source as loader image
    imgPersonPicture.Attributes.Add("src", "/img/loading.gif");
    //set image resource as actual image
    imgPersonPicture.Attributes.Add("data-src", imageObject.ImagePath.TrimStart('~'));

JS代码：

window.onload = function () 
    //Apply lazy loading functionality to images
    $(".lazy").unveil();
    //Javascript to set the width and height of the details div
    .
    .
    //Javascript to blur all the other images when one image is clicked

function jWDScrollWindow() 
    //scroll by 1px to load the images
    $(window).scrollTop($(window).scrollTop() + 1);

我尝试过的事情：

我认为 jQuery 揭幕可能会使页面变慢或其他原因。所以，我删除了调用，但问题是unveil(); 在window.onload 中被调用。因此，如果 window.onload 没有被解雇，那么取消揭幕就没有任何意义。 我在window.onload() 上添加了alert()，但在这种情况下，一切正常。

所有功能都可以在所有设备上完美运行，除了 ipad 和 ios 8.4（即使在早期的操作系统中也能很好地运行）

非常感谢您的帮助/建议。

编辑： 我找到了一个jsconsole，通过它我们可以在桌面上看到iPad中的控制台日志。 Here 是我们如何使用它。 我检查了日志，发现当我收到错误JQMIGRATE: jQuery.browser is deprecated 时，我的window.onload 事件不会触发。然而，如果我得到日志JQMIGRATE: Logging is active，一切正常。 我的jqmigrate 参考在母版页中，

<script type="text/javascript" async src='/js/jquery-migrate-1.1.1.js'></script>

【问题讨论】：

As unveil loads the image only after scroll event, I have added a code on page load to scroll a page by a pixel artificially. 为什么不直接触发滚动事件？？？

I added an alert() on window.onload(), but in this case, everything works perfect 听起来像是一个异步问题，在加载 unveil 插件脚本之前触发了窗口加载。控制台中的任何错误？加载文档后是否包含脚本？我问它，但如果是的话，如果脚本没有缓存，这应该是所有浏览器/操作系统的问题

@A.Wolff: 1. 我触发了滚动事件（有问题已更新） 2. 有什么方法可以检查 iPad 中的控制台吗？桌面上的任何浏览器都没有错误。

我没有 iPad，所以...如果尚未完成，您应该做的第一件事是清除浏览器的缓存，这可能只是问题编辑：也许 ***.com/questions/7449317/… oops听起来好像过时了...

确实如此。而“android 手机的 Google Chrome 远程调试”仅适用于 Android 手机

【参考方案1】：

我找不到控件不触发window.onload 事件的原因。但是对于那些会遇到同样问题的人，我在这里发布相反的方式来解决这个问题。 （显然我不想获得tumbleweed 徽章..）

我在 window.onload 内的代码后面（cs 文件）中添加了大部分 javascript 当我在页面加载时调用 javascript 函数 jWDScrollWindow() 来滚动页面时，我在 jWDScrollWindow() 函数本身中添加了 $(".lazy").unveil();。

这解决了我在 iPad 中的问题，但更改不是特定于设备的。

function jWDScrollWindow() 
    //Apply lazy loading functionality to images
    $(".lazy").unveil();
    //scroll by 1px to load the images
    $(window).scrollTop($(window).scrollTop() + 1);

这不是一个完整的问题解决方案，而是一项工作。如果有人对此问题有原因或解决方案，请发布作为答案。

【参考方案2】：

我最近也遇到了这个问题。听起来和你的 Shubham 情况类似。

TL;DR：

如果<audio> 或<video> 标记包含属性preload="none"（可能还有其他变体），iOS8 的各种版本似乎会阻止窗口加载触发

我认为“无”的预加载实际上不应该尝试加载媒体数据，所以它为什么会干扰窗口加载？？

进一步说明：

在我帮助建立的一个 Wordpress/WooCommerce 网站中，客户有几名员工都使用 iPhone iOS 8.4.1。三个使用 iPhone 5，一个使用 iPhone 6。其中两个使用 iPhone 5 有问题，另一个 iPhone 5 用户和 iPhone 6 用户没有这样的问题，所以最初我认为问题在于某些 jQuery 的顺序/速度插件可能已加载。

症状是应该扩展/收缩的移动导航和 AJAX 搜索功能对这些用户来说会失败并且根本无法运行，但所有其他浏览器/台式机/Android 测试都很好。

该网站销售音频产品，其中许多带有音频预览。经过一些（很多！）测试后，我意识到用户在没有音频标签的页面上没有这个问题。

所以我搜索了 iOS8、window onload 和 audio bugs，我发现这两个小宝石包含与音频问题相关的 cmets各种版本的 iOS：

http://themeforest.net/forums/thread/ios8-safari-breaks-windowload-info-for-authors/147825?page=1&message_id=1154236#1154236（用户“tommusrhodus”）

如果你的页面中有任何 或 标签，那么它目前将在 iOS8 Safari 中被破坏，如果这些标签存在于 DOM 中，它永远不会触发 window.onload 事件。

https://github.com/codevise/pageflow/issues/118（用户“lufes”）：

问题与window.onload事件有关，如果有视频或音频设置了preload="none"属性，则不会触发该事件。 window.onload 将在每个资产加载后运行，而 iOS 8 会一直等待视频加载，这永远不会。

所以对我来说解决方案——因为我不想破解 Wordpress 核心——是通过 jQuery 在准备好的回调中完全删除 preload 属性，该回调会在窗口加载之前触发，例如：

$("audio").removeAttr("preload");

【讨论】：

感谢@meerkatlookout，您的解决方案很有意义。我一定会试试这个。但就我而言，我的页面中有很多（大约 10 个）视频，这些视频曾经在页面加载时加载，所以我添加了 preload=none 以便仅在用户点击视频时加载视频。

谢谢！奇怪的是，我在 8.3 上看到了这个，但在 iOS 9.1 设​​备上可以正常工作。

【参考方案3】：

还有一个解决方法：

var iOS8 = navigator.userAgent.match(/(iPad|iPhone|iPod).*OS 8_\d/i);
if( iOS8 )
    setTimeout(function()
        $(window).trigger('load');
    , 3500);

这将触发加载，并“欺骗”iOS8 上的 Safari 以认为 $(window) 对象已加载，因此

$(window).on('load', function());

会起作用的。

希望这对正在搜索此内容的人有所帮助:)