前端页面加载后，整个页面都是白色，而且按钮位置处还可以点击，按f12进入开发模式后，页面就正常了？

Posted 2023-04-16

页面加载后,第一眼就是整个页面都是白色，不管是字还是其他，只要在按钮或者下拉框记忆中的位置点击，功能还是能用。按f12进入浏览器开发模式后，页面就正常了

看看控制台有没有报错，检查一下是不是设置了遮罩层追问

没有报错，也没有遮罩层

追答

看看元素的高度，是不是设置过根据页面大小设置对应的高度？

追问

这些都是正常，在相应位置上的按钮或者下拉框就算看不到也可以进行操作

追答

那你打开开发模式刷新页面能正常显示么

追问

打开开发模式都不一定正常，但是在elemnts去看时就肯定正常

参考技术A 你需要实现的具体需求是什么，不如拿html文档说具体一些；

SharePoint 2013 在整个页面加载后添加 javascript

【中文标题】SharePoint 2013 在整个页面加载后添加 javascript

【英文标题】：SharePoint 2013 add javascript after whole page load

【发布时间】：2013-05-31 22:28:03

【问题描述】：

免责声明：我没有使用 SharePoint2013 的经验。

我有问题 - 我必须在整个页面加载后包含/触发一些 javascript 函数。我尝试监听 DOMDocumentReady 和 window.load 事件，但 sharepoint 在这些事件之后呈现页面的其余部分。

我的问题是：在使用 ajax 呈现整个页面后，我应该怎么做才能运行脚本。 我还注意到页面导航基于哈希 (#) 部分。显然我也必须检测到那个时刻。

任何帮助甚至链接到文档中的正确页面都会很棒！

【问题讨论】：

您是使用 jQuery 来触发您的 ajax 请求还是某些 SharePoint 特殊情况？

我必须集成第 3 方商业库，它希望在加载的那一刻，所有 html 都存在。我不会在开始时发出任何 ajax 请求。此外，我必须在某些链接等上附加事件侦听器。

但是你用什么来触发 Ajax 请求？

不确定我是否理解你 - 但 ajax 要求什么？目前该脚本作为

我的意思是加载页面其余部分的 sharepoint 2013 默认 ajax。这些调用不是我的，它是 SharePoint2013 的默认行为。

【参考方案1】：

你是对的，很多事情发生在 $(document).ready() 之后的页面上。 2013 确实提供了一些选择。

1) 按需脚本：（加载一个 js 文件然后执行我的代码。）

function stuffThatRequiresSP_JS()
    //your code

SP.SOD.executeFunc("sp.js")

2) 延迟加载（等待一个js文件，然后运行）

function stuffToRunAfterSP_JS()
    //your code

ExecuteOrDelayUntilScriptLoaded(stuffToRunAfterSP_JS, "sp.js")

3) 在其他内容完成后加载

function runAfterEverythingElse()
    // your code

_spBodyOnLoadFunctionNames.push("runAfterEverythingElse");

来源：

executeFunc：http://msdn.microsoft.com/en-us/library/ff409592(v=office.14).aspx

ExecuteOrDelayUntilScriptLoaded：http://msdn.microsoft.com/en-us/library/ff411788(v=office.14).aspx

无法在 _spBodyOnLoadFunctionNames 上找到来源，但我在一些地方使用它。

祝你好运。

【讨论】：

感谢您的回答，希望您早点来这里；) - 如果有人感兴趣，sP2013 还会在 body 元素上发出“FakeEvents”。这些事件在每个浏览器中都不同，但 sp.start.js 中的 ctrl+f 类似于 Fakeevent 函数。 （现在不记得了，但应该是这样的）。还要注意，SP2013 的搜索页面是在所有这些事件之后加载的；）。所以主页面可以监听这些事件，但搜索页面不行。

_spBodyOnLoadFunctionNames 对我不起作用，但 SP.SOD.executeOrDelayUntilEventNotified 确实运行了……知道为什么吗？

【参考方案2】：

大致相当于_spBodyOnLoadFunctionNames 的记录事件注册函数是SP.SOD.executeOrDelayUntilEventNotified。调用它来接收“sp.bodyloaded”事件的通知：

SP.SOD.executeOrDelayUntilEventNotified(function () 
    // executed when SP load completes
, "sp.bodyloaded");

这个处理程序实际上在_spBodyOnLoadFunctionNames 函数之前触发。

此参考适用于 SharePoint 2010，但 SOD 实用程序存在于 SharePoint 2013 中：http://msdn.microsoft.com/en-us/library/office/ff410354(v=office.14).aspx

【参考方案3】：

https://mhusseini.wordpress.com/2012/05/18/handle-clicks-on-calendar-items-in-sharepoint-2010-with-javascript/

上面的链接对我有用。他基本上使用 ExecuteOrDelayUntilScriptLoaded 在 SP.UI.ApplicationPages.Calendar.js 加载后启动他的日历挂钩代码。

然后，在日历挂钩中，他将自己的函数附加到： SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed 函数。

 _spBodyOnLoadFunctionNames.push("LaunchColorCodeCalendarScriptOnReady");


function LaunchColorCodeCalendarScriptOnReady() 


    ExecuteOrDelayUntilScriptLoaded(
        MyCalendarHook,
        "SP.UI.ApplicationPages.Calendar.js");




function MyCalendarHook() 
    var _patchCalendar = function () 
        //Do something to the items in the calendar here
        //ColorCodeCalendar();
    ;

    var _onItemsSucceed = SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed;
    SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function ($p0, $p1) 
        _onItemsSucceed.call(this, $p0, $p1);
        _patchCalendar();
    ;

【讨论】：

正是我正在寻找我的日历修改。

【参考方案4】：

在 SharePoint 中的 OnLoad 事件之前/中间/之后加载我们的自定义 JavaScript 代码有不同的技术：

ExecuteOrDelayUntilBodyLoaded.
Sys.Application.pageLoad.
document.ready Jquery.
_spBodyOnLoadFunctionNames.
_spBodyOnLoadFunction.
ExecuteOrDelayUntilScriptLoaded:sp.core.js.
SP.SOD.executeFunc: sp.js.
Sys.WebForms.PageRequestManager.PageLoaded

– ExecuteOrDelayUntilBodyLoaded 函数总是最先执行（但在这个阶段我们无法访问 SP 方法）。这对于在 OnLoad 过程的早期阶段执行我们的自定义代码很有用。

– 有两个 SharePoint onLoad 函数 _spBodyOnLoadFunctionNames 和 _spBodyOnLoadFunction。始终按顺序执行。所以，如果我们想在我们（或其他开发人员）包含在_spBodyOnLoadFunctionNames中的所有函数之后执行一些代码，那么使用这个_spBodyOnLoadFunction很有用，因为最后执行。

– ExecuteOrDelayUntilScriptLoaded:sp.core.js 和 SP.SOD.executeFunc:sp.js。正在以随机方式交换执行顺序。

– 如果我们想在所有函数之后执行一些函数（SP、加载后函数、Yammer 等）我们可以使用这个函数来附加 OnLoad 事件 –> Sys.WebForms.PageRequestManager.PageLoaded。

您可以在此处查看整篇文章解释每种类型、优缺点：https://blog.josequinto.com/2015/06/16/custom-javascript-function-loaded-after-the-ui-has-loaded-in-sharepoint-2013/

问候！

【参考方案5】：

这里有一篇很好的文章如何使用内置的 SharePoint SOD（按需脚本）功能：http://www.ilovesharepoint.com/search/label/SOD

它适用于 SP 2010 和 2013。

按需加载脚本的想法非常有意义。 SharePoint 2010 加载了很多 JavaScript - 这需要时间！所以想法是：首先加载 HTML 并让它由浏览器呈现，以便用户能够尽可能快地阅读请求的信息。然后在第二步中加载行为（JavaScript）。