Databases
StackOverflow2013
Postsdbo
POHTML5 pushstate and SEO link
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 pushstate and SEO link
    primarykey
    data
    text
    <p>I try to implement pushstate history on my website in order to load content from a single.php page inside a index.php container.</p> <p>My website have two main page : index.php and single.php .</p> <p>On the index.php there are links that call pushstate script:</p> <pre><code>&lt;a class="phplink" href="/Formlabs-3D-printer" title="Formlabs 3D printer"&gt;Post 12&lt;/a&gt; &lt;a class="phplink" href="/Minimal-Bumper-for-iPhone-5" title="Minimal Bumper for iPhone 5"&gt;Post 11&lt;/a&gt; </code></pre> <p>On my single.php page I use isset get method to dynamically load content that correspond to clicked link on index.php:</p> <pre><code>&lt;?php if (isset($_GET["page"])) { //I do some stuff in order to echo content ?&gt; </code></pre> <p>In my .htaccess file I rewrite the url link (that the reason that in index.php link are cleans):</p> <pre><code>Options +FollowSymLinks RewriteEngine on RewriteRule /([a-zA-Z0-9\-]+)$ /index.php RewriteRule /([a-zA-Z0-9\-]+)$ /single.php?page=$1 [L] </code></pre> <p>And here my pushstate script:</p> <pre><code>$.ajaxSetup({cache:false}); $(".phplink").click(function(){ var $post_link = $(this); load_content($post_link.attr('title'),$post_link.attr('href')); return false; }); window.onpopstate = function(event) { if (event.state) { load_content(event.state.title, window.location.pathname, true); } else { var stateObj = { title: document.title, url: window.location.pathname, }; url = window.location.pathname; load_content(url,url); } } function load_content(title,url,skipHistory) { $.get(url,function (data) { document.title = title; var stateObj = { title: title, url: url }; if (!skipHistory) { if (typeof window.history.pushState == 'function') { window.history.pushState(stateObj,title,url); } } if(url.substring(1) != '') { $("#ajaxify_container").html("loading..."); $("#ajaxify_container").load('single.php?page='+url.substring(1)+' #container-2'); } else { $("#ajaxify_container").html(''); } }); } </code></pre> <p>My pushstate script works to load content on link click (on <code>.phplink</code> click). It works also for back/forward button.</p> <p>1st PROBLEM : When I refresh the browser (with an pushstate link in the url) it works on google chrome (load content from single.php to index.php container) but no in IE10 (nothing is loaded, it stay on index.php page).</p> <p>2nd PROBLEM : If I disable javascript to see what's happen for googlebot (for SEO). I can't load/reach the single.php page, it always stay on index.php. So single.php page can't be crawled by search engine (I suppose, but I'm not sure about this) . This behaviour is normal because I set in my .htaccess file, that "all this links" will be redirect to index.php .</p> <p>I do this trick because without it pushstate loads single.php page when I refresh. And I don't want this behaviour. I want when I refresh it just load content from single.php into index.php container.</p> <p>So my main problem (problem 2) is: I don't know how to write my script or my links in my php page in order to load content in my index.php file when I click, I refresh and I back/forward.</p> <p><strong>In normal behavior of pushstate, does on browser refresh, onpopstate can load content from a page into a container of an other page (load content from single.php into a container of index.php) ?</strong></p> <p>I hope that someone can help me and explain how it works. I have some difficulty to understand how it work with links.</p> <p>Sorry for my English, I'm French...</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USfreaky
    1. USfreaky
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHTML5 pushstate and SEO link
      1. USfreaky
      1. VTFavorite
    2. VO
      singulars
      1. POHTML5 pushstate and SEO link
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHTML5 pushstate and SEO link
      1. USdetache
      1. VTFavorite
    1. COYou deleted your original question, so I can't see what your response was. Why the similar rewrite rules?
      singulars
      1. POHTML5 pushstate and SEO link
      1. USMike Rockétt
    2. COI use this similar rewrite rules because without it, when I refresh the browser it goes a the single.php page and load it. With this rewrite rules it stay on index.php when I refresh the browser then load content fron single.php. Can I have this behaviour without the rewrite rules?
      singulars
      1. POHTML5 pushstate and SEO link
      1. USfreaky
    3. COI'm not familiar with the History API - but I still don't think you should have routes like that. It should always point to one file...
      singulars
      1. POHTML5 pushstate and SEO link
      1. USMike Rockétt
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload