Member Avatar for Rizi004

Hello everyone
i'm developing facebook app but i want when user reach at the end of the page the content auto load from database. The only problem is that how i can check that user's reach at the end of the page with in iframe.

I have used auto load content in websites but i only want to know how we can acheive this within iframe because there is no scroll bar in facbook app.

Regards
Rizwan

  • 2 Contributors
  • 1 Reply
  • 247 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Masterblank

Dani AI

Generated

This thread’s goal (auto-loading more items when the user reaches the end of a Facebook Canvas iframe) is best solved via the Facebook Canvas JavaScript API rather than relying on ordinary window scroll values — ’s pointer in that direction is correct. Canvas methods exist because your app runs inside Facebook’s frame and same-origin rules prevent direct access to the outer page. (stackoverflow.com)

Practical, reliable approach (summary):

  1. Initialize the JS SDK and run Canvas calls from fbAsyncInit.
  2. Poll the Canvas viewport/scroll info at a safe rate (throttle the checks) and detect when the user is within a small threshold (for example 200–400px) of the bottom.
  3. Use an isLoading flag to avoid duplicate requests, fetch the next page via AJAX, append the HTML, then tell Facebook to resize the iframe (explicit setSize or let setAutoGrow handle growth). Throttle/debounce avoids CPU/jank and excessive network calls. (developer.mozilla.org)

Minimal pattern (adapt to your stack):

let isLoading = false;
const check = _.throttle(function() {
  FB.Canvas.getPageInfo(function(info){
    const nearBottom = (info.scrollTop + info.clientHeight) >= (document.body.scrollHeight - 300);
    if (nearBottom && !isLoading) {
      isLoading = true;
      fetch('/load-more').then(r=>r.text()).then(html=>{
        document.querySelector('#list').insertAdjacentHTML('beforeend', html);
        FB.Canvas.setSize({ height: document.body.scrollHeight });
      }).finally(()=> isLoading = false);
    }
  });
}, 200);
setInterval(check, 300);

Adjust the threshold, throttle interval, and loading indicator to taste. (stackoverflow.com)

Troubleshooting checklist (things that commonly bite): call Canvas methods only after FB.init / fbAsyncInit; avoid CSS that forces height:100% or absolute-only layouts (these can break sizing); setAutoGrow will grow but won’t reliably shrink — use setSize to reduce height when needed; guard against infinite resize loops and test inside Facebook’s desktop and mobile in-app webviews (behaviour can differ). If the Canvas API proves flaky on a particular platform, provide an internal scroll container plus a visible “Load more” fallback. (stackoverflow.com)

Summary: follow ’s Canvas-API direction, but implement throttled checks, an isLoading gate, and explicit setSize after DOM updates to make infinite loading robust.

Member Avatar for Masterblank

maybe getPageInfo function could help you?

----------------------------------
FB.Canvas.getPageInfo

Returns a Javascript object containing information about your app's canvas page. You need to provide a callback with the API, where we fetch the new value and return it.

As a Canvas app runs within an iframe it does not have access to window.innerHeight and window.innerWidth. This method exists to provide access to the client (browser) dimensions as well as the current scroll position and offset coordinates.

Example:

FB.Canvas.getPageInfo(
    function(info) {
        alert('Width: ' + info.clientWidth + ' Height: ' + info.clientHeight);
    }
);

Returns:

clientHeight (Integer) The height of the viewport in pixels

clientWidth (Integer) The width of the viewport in pixels

offsetLeft (Integer) The number of pixels between the left edge of the viewport and the left edge of your app's iframe

offsetTop (Integer) The number of pixels between the top edge of the viewport and the top edge of your app's iframe

scrollLeft (Integer) The number of pixels between the left edge of your iframe and the left edge of your iframe's viewport

scrollTop (Integer) The number of pixels between the top edge of your iframe and the top edge of your iframe's viewport

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.