Iframe Content Loader In jQuery - Simple Iframe View

Iframe Content Loader In jQuery - Simple Iframe View

The Simple Iframe View jQuery plugin allows you to load several external web contents into the same container using the iframe.

1. Download the plugin and load the jquery-simple-iframe-view.js script from the dist folder.

# NPM
$ npm install @kanety/jquery-simple-iframe-view --save
<script src="/path/to/jquery.min.js"></script>
<script src="dist/jquery-simple-iframe-view.js"></script>

2. Or from the CDN.

<script src="/path/to/jquery.min.js"></script>
<script src="https://unpkg.com/@kanety/[email protected]/dist/jquery-simple-iframe-view.js"></script>

3. Create a container in which you want to display the iframe content.

<div id="myContainer"></div>

4. Create anchor links pointing to external URLs.

<div id="basic">
  <p><a href="iframe1.html">iframe1.html</a></p>
  <p><a href="iframe2.html">iframe2.html</a></p>
  <p><a href="iframe3.html">iframe3.html</a></p>
</div>

5. Initialize the plugin on the top container and done.

$('#basic').simpleIframeView({
  container: '#myContainer'
})

6. Specify the maximum number of iframe contents to cache. Default: 100.

$('#basic').simpleIframeView({
  container: '#myContainer',
  maxCache: 3
})

7. Determine whether to auto resize the iframe content. Default: true.

$('#basic').simpleIframeView({
  container: '#myContainer',
  autoResize: false
})

8. Add more attributes to the iframe tag.

$('#basic').simpleIframeView({
  container: '#myContainer',
  template: '<iframe scrolling="no">'
})

9. More plugin options.

$('#basic').simpleIframeView({
  urlSelector: 'a',
  urlAttribute: 'href',
  marginHeight: 0
})

10. Event handlers.

$('#basic').simpleIframeView({
  container: '#myContainer'
}).on('iframe:show', function(e, $iframe) {
  // on show
}).on('iframe:hide', function(e, $iframe) {
  // on hide
}).on('iframe:loaded', function(e, $iframe) {
  // on loaded
}).on('iframe:resized', function(e, $iframe) {
  // on resized
});

This awesome jQuery plugin is developed by kanety. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 19.06.2019
  • Source