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.

How to use it:

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/jquery-simple-iframe-view@latest/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.