Skip to content
Search! & Match! API
Putting it together
latest

Putting it together

Putting it together🔗

  1. Place the iframe containing Search! at the desired place on the integrating page.
  2. Include the general purpose javascript library jQuery, if not already present. [2]
  3. Include the iframeResizer.min.js script. [1]
  4. Include the following script block for iframeResizer to work and enable seamless scrolling. (The placement of the script block does not matter as long as it is after the inclusion of the jQuery and iframeResizer scripts.)
  5. Set the iframeID value in the script block to the actual value.

The Javascript Code🔗

<script src="https://staging.textkernel.nl/SearchBox/js/iframeResizer.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
      var $window = $(window),
          iframeID = 'myIframe', //change this to Search iframe id on your page
          iframe = document.getElementById(iframeID),
          iframeWindow = iframe ? iframe.contentWindow : null,
          $iframe = $('#' + iframeID);
      function debounce(func, wait) {
          var timeout;
          return function() {
              var context = this, args = arguments;
              var later = function() {
                  func.apply(context, args);
              };
              clearTimeout(timeout);
              timeout = setTimeout(later, wait);
          };
      }
      $iframe.iFrameResize({enablePublicMethods: true, autoResize: false});
      $window.on('scroll', debounce(function() {
          var top  = window.pageYOffset || document.documentElement.scrollTop;
          if (top + $window.height() >= $iframe.height() + $iframe.offset().top) {
              iframeWindow.postMessage('do-scroll', iframe.src);
          }
      }, 100));
      $window.on('message', function(event) {
          if (event.originalEvent.data.indexOf('check-scrolling-availability') >= 0) {
              if ($('body').height() <= $(window).height()) {
                  iframeWindow.postMessage('do-scroll', iframe.src);
              }
          }
      })
  });
</script>