Issue with accessing DOM of very long SharePoint online modern pages

%3CLINGO-SUB%20id%3D%22lingo-sub-158359%22%20slang%3D%22en-US%22%3EIssue%20with%20accessing%20DOM%20of%20very%20long%20SharePoint%20online%20modern%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-158359%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%0A%3CP%3ECurrently%20we%20are%20facing%20issue%20with%20custom%20SPFx%20web%20part%20on%20a%20very%20long%20SharePoint%20online%20modern%20pages.%20I%20suspect%20it's%20due%20to%20some%20kind%20of%20Lazy%20loading%20of%20modern%20page.Our%20SPFx%20web%20part%20basically%20provides%20an%20Anchor%20tag%20which%20links%20to%20different%20section%20in%20same%20page.%20When%20we%20create%20a%20different%20section%20(using%20Text%20web%20part)%2C%20we%20are%20adding%20another%20SPFx%20web%20part%20which%20acts%20as%20placeholder%20div%20and%20assigns%20%22id%22%20to%20the%20placeholder.%3C%2FP%3E%0A%3CP%3EWhen%20user%20clicks%20the%20Anchor%20tag%20whose%20section%20resides%20somewhere%20down%20in%20the%20page%20(%20with%20div%20element%20%3C%2FP%3E%3CDIV%20id%3D%22%26quot%3BSectionY%26quot%3B%22%3E%20)%2C%20It%20does%20not%20jump%20to%20the%20respective%20section.%20We%20noticed%20that%2C%20idocument.getElementById('SectionY')%20or%20%24('%23SectionY')%20is%20null.%20Apparently%20if%20we%20scroll%20down%20and%20then%20try%20to%20get%20element%20by%20its%20Id%2C%20We%20are%20getting%20the%20element%20(we%20tried%20it%20in%20Chrome%20Console).%3CP%3E%3C%2FP%3E%0A%3CP%3EAnyone%20facing%26nbsp%3Bsimilar%20issues%3F%20How%20does%20modern%20SharePoint%20online%20page%20rendering%20is%20different%20than%20classic%20site%20pages%3F%20Is%20there%20any%20other%20way%20to%20access%20complete%20DOM%20of%20the%20page%20when%20page%20is%20very%20long%3F.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThanks%2C%3CBR%20%2F%3EGuru%3C%2FP%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-158359%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EModern%20Pages%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1534546%22%20slang%3D%22en-US%22%3ERe%3A%20Issue%20with%20accessing%20DOM%20of%20very%20long%20SharePoint%20online%20modern%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1534546%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F108729%22%20target%3D%22_blank%22%3E%40gurudatt%20bn%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%20I%20was%20googling%20this%20issue%20and%20stumbled%20on%20this%20post.%20I'm%20experiencing%20this%20same%20issue%20on%20a%20standard%20release%20tenant%2C%20but%20not%20a%20target%20release%20tenant.%20It%20does%20mess%20up%20some%20spfx%20web%20parts%20which%20depends%20on%20the%20entire%20DOM%20being%20loaded%20upon%20page%20open.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDid%20you%20ever%20get%20any%20new%20information%20on%20this%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

Hi,

Currently we are facing issue with custom SPFx web part on a very long SharePoint online modern pages. I suspect it's due to some kind of Lazy loading of modern page.Our SPFx web part basically provides an Anchor tag which links to different section in same page. When we create a different section (using Text web part), we are adding another SPFx web part which acts as placeholder div and assigns "id" to the placeholder.

When user clicks the Anchor tag whose section resides somewhere down in the page ( with div element <div id="SectionY"> ), It does not jump to the respective section. We noticed that, idocument.getElementById('SectionY') or $('#SectionY') is null. Apparently if we scroll down and then try to get element by its Id, We are getting the element (we tried it in Chrome Console).

Anyone facing similar issues? How does modern SharePoint online page rendering is different than classic site pages? Is there any other way to access complete DOM of the page when page is very long?.

 

Thanks,
Guru

1 Reply

@gurudatt bn 

 

Hi I was googling this issue and stumbled on this post. I'm experiencing this same issue on a standard release tenant, but not a target release tenant. It does mess up some spfx web parts which depends on the entire DOM being loaded upon page open.

 

Did you ever get any new information on this? 

 

Thanks.