history state (due to pushState) issues

Post a reply


This question is a means of preventing automated form submissions by spambots.
Smilies
:D :) ;) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :| :mrgreen: :geek: :ugeek:

BBCode is ON
[img] is ON
[url] is ON
Smilies are ON

Topic review
   

If you wish to attach one or more files enter the details below.

Maximum filesize per attachment: 1 MiB.

Expand view Topic review: history state (due to pushState) issues

Re: history state (due to pushState) issues

by axew3 » Tue Feb 23, 2021 10:19 am

Hello!
just over the iframe code, but at moment nothing has not been changed in the overall_footer.html part.

while page-forum, will be updated to fix the wp uid1 / phpBB2 uid2 loop
this history push bug you reported and the preloader loop

About this problem, on pushState (and duplicated history insertions), i see that it can be resolved like this:

open page-forum, and where this line:

Code: Select all

history.pushState({w3all_passed_url: w3all_passed_url}, \"\", w3all_passed_url_push);
change into this:

Code: Select all

    //history.pushState({w3all_passed_url: w3all_passed_url}, \"\", w3all_passed_url_push);
    history.replaceState({w3all_passed_url: w3all_passed_url}, \"\", w3all_passed_url_push);
more below, there is this code added, to fix the when landing to forum pushState:

Code: Select all

 jQuery( window ).load(function() { // wrapped here, or won't push correctly
  var w3all_landed_url = '".$w3all_url_to_cms."';
  var w3all_landed_url_clean = w3allNormalize_phpBBUrl_onParent(w3all_landed_url);
  // PUSH phpBB URL when wp page load first time //
  var w3all_passedurl = window.btoa(unescape(encodeURIComponent(w3all_landed_url_clean)));
  var w3all_passedurl_push = '".$w3allhomeurl."/".$wp_w3all_forum_folder_wp."/?".$w3all_iframe_custom_w3fancyurl."=' + w3all_passedurl;
  history.replaceState({w3all_passedurl: w3all_passedurl_push}, \"\", w3all_passedurl_push);
  jQuery('#w3_toogle_wrap_loader').attr( \"class\", \"w3_no_wrap_loader\" );
 })
there are two more little fixes about id1 uid2 and the empty fancy or w3= empty, and it is all working fine now into my tests.

this is the page forum that: fix uid1 WP and phpBB uid2 loop
fix the pushState on page forum landing and oniframe navigation
fix the empty w3= (or custom fancy= url) that sometime was happening on address bar

fix the preloader that sometime do not disappear (and there is no stop until page reloaded may do to explicit reload)?
not totally sure, moments ago i realized on mind all the flow, but not focused if tricks added really fixed also this aspect.

this new patched file has been applied here online, so you can see how it work now, that seem to be the right way.
Let know!
Attachments
page-forum.zip
(5.22 KiB) Downloaded 4090 times

Re: history state (due to pushState) issues

by axew3 » Tue Feb 02, 2021 1:30 pm

Thank you for all important hints and observations that leaded me to understand the problem.
Giving to this aspect a more deep look into, before the v6 code release, so that will contain all the possible (correct) solutions that in the while will come out

Re: history state (due to pushState) issues

by oferlaor » Tue Feb 02, 2021 11:18 am

The preloader thing is only a preliminary idea. I haven't been able to get to it yet.

About the history state, I was thinking last night about a possible solution, but tried it this morning and it failed. Still not sure why (this is a very convoluted issue).

popState appears to be triggering only on the second "Back" command, which actually holds the scrolling position. I was trying to find another possible event that could trigger instead. I found a couple but they are mostly page lifecycle events triggered by the move.

Then, I was thinking, what if I could change the order so that the popState happens last, so that the popState would trigger on the first BACK, that would let me do the history.back() inside the popState with no additional side effects.

This is the code I tried, however strangely it does not work. The popState event always happens on the second ("Good") back. I tried adding a setTimeout 0 so that the pushState definitely happens after the new URL registers, but I don't think that works.

Code: Select all

    iFrameResize({
			log         : false,
			inPageLinks : true,
			targetOrigin: '".$w3all_url_to_cms."', 
			checkOrigin : w3all_orig_domains, 
		 // heightCalculationMethod: 'documentElementOffset', // If iframe not resize correctly, un-comment (or change with one of others available resize methods) 
		 // see: https://github.com/davidjbradshaw/iframe-resizer#heightcalculationmethod       
			onMessage : function(messageData){ // Callback fn when message is received 	
				// w3all simple js check and redirects
				var w3all_passed_url = messageData.message.append.toString();
				var w3all_ck = \"".$_SERVER['SERVER_NAME']."\";
				var w3all_pass_ext  = (w3all_passed_url.indexOf(w3all_ck) > -1);    
				var w3all_ck_preview = (w3all_passed_url.indexOf('preview') > -1);

				if (w3all_ck_preview == false) { // or the phpBB passed preview link, will be recognized as external, and preview will redirect to full forum url instead
				 // so these are maybe, external iframe redirects
					if (w3all_pass_ext == true) {
						window.location.replace(w3all_passed_url); 
					 }
					if (/^(f|ht)tps?:\/\//i.test(w3all_passed_url)) {
					  window.location.replace(w3all_passed_url); 
					}
				}
				// do not pass to be encoded an url with sid or if it point to phpBB admin ACP via iframe
				if( /[^-0-9A-Za-z\._#\:\?\/=&%]/ig.exec(w3all_passed_url) !== null || /adm\//ig.exec(w3all_passed_url) !== null || /sid=/ig.exec(w3all_passed_url) !== null ){
					w3all_passed_url = '';
				}
				// PUSH phpBB URLs //
				w3all_passed_url = window.btoa(unescape(encodeURIComponent(w3all_passed_url)));
				w3all_passed_url_push = '".$w3allhomeurl."/".$wp_w3all_forum_folder_wp."/?".$w3all_iframe_custom_w3fancyurl."=' + w3all_passed_url;
				messageData.iframe.contentWindow.document.location.href= messageData.message.ref;
				history.pushState({w3all_passed_url: w3all_passed_url}, \"Forums\", w3all_passed_url_push);
			}
	});
	window.onpopstate = function(event) {
	  console.log(\"pop state: \" + JSON.stringify(event.state));
	};	

Code: Select all

			if ('parentIFrame' in window){
				if( typeof w3allNOappend == 'undefined' || w3allNOappend == false ){
					window.parentIFrame.sendMessage({ append:w3allappend, ref: href});
					e.preventDefault();
				}
			}

Documentation also says replaceState should also cause a popState, but in my testing that does not work either.

The only thing I think might do the trick is to clone the iframe, change its source and then connect it to the IframeResizer and then kill the old one...

I'm out of ideas...

Re: history state (due to pushState) issues

by axew3 » Mon Feb 01, 2021 8:44 pm

will try to go more deep asap ... i go to check your solution about preloader, because of that still stop here, often not correctly removed, i have to reload the page.
Or i will rewrite if still in trouble with, with a different solution.

For what i see into firefox and chrome it return correctly to the scrolled position at moment.

While what i really do not understand is why the preloader do not disappear often ... it is very strange to me, exactly happen when i may click on back button to return to forum on the very first history stack

Re: history state (due to pushState) issues

by oferlaor » Mon Feb 01, 2021 8:35 pm

OK, tried it.

But it doesn't quite work correctly (almost). The popstate event gets called the second back (so you lose the scroll position).

Is there a way to catch the first event and do the go back the first time?

Re: history state (due to pushState) issues

by axew3 » Mon Feb 01, 2021 8:22 pm

yes applied

ps
found another neat hack - I moved the iframeresizer to the overall header and it really accelerated how fast the forum loads.
i will come to see how you did if you do not provide here a ready example!
Provide one when ready if you can, so may it will be so published as default for all (with credits for you, of course)

Top