How to display iframe by a Javascript snippet?

Question

I have seen some widgets online that gives the user the possibility of including a short Javascript snippet in their own page, which when executed displays an Iframe, like in the following example.

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script><fb:facepile></fb:facepile>

How can I do this by myself - have a javascript on my server, that when called on a remote server, writes out an iframe or loads content into their page?

Answer 1

I think you may have how this is working a bit mixed up. The way it's working is this: 1. User requests page from your domain/server, page is served. 2. Client web browser on users machine interprets said page, if a script block includes a reference to a js file at some other location then said js file is fetched. 3. Javascript is processed by the clients browser.

So really all you need is a JS file (plain old ASCII) on the server and have it do some document.write() calls to add the code you want it to add, for example:

go to http://www.shaunhusain.com/TestIFrameViaJS

three files there involved index.html anotherpage.html testIFrame.js

let me know if it doesn't work out or I took a wrong direction for what you're looking for?

Shaun

Answer 2

The traditional way (considered a bit messy; won't work with XHTML-as-XML host pages; if called after page load via async, will blow up the entire page):

document.write('<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>');

Alternatively with innerHTML to an element on the page with a predefined name:

document.getElementById('examplecomframe').innerHTML= '<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>';

Or with DOM to insert just before the current <script> (though again that can be unpredictable if deferred):

(function() {
    var iframe= document.createElement('iframe');
    iframe.src= 'http://www.example.com/myframe';
    iframe.width=iframe.height= 100;
    document.getElementById('examplecomframe').appendChild(iframe);
})();

Or to insert just before the current script:

    var scripts= document.getElementsByTagName('script');
    var script= scripts[scripts.length-1];
    script.parentNode.insertBefore(iframe, script);

I wouldn't use jQuery for third-party script inclusion. You'd have to load the whole heavy framework into the enclosing page, just for the sake of a few lines of JS. This can cause clashes with other frameworks (or different versions of jQuery) being used by the host page, something very rude for a third-party script to do.

Answer 3

To generate a Tag with jQuery you can use $('<tagname />') and pass an object with parameters (for example src). Afterwards you append this iframe to the Dom. Using html() you can set the html-content of a selected element (in this case a tag with id example) to your iframe.

$(function() {     
  var iframe = $('<iframe />', {
    src: 'http://example.com',
    width: 100,
    height: 100
  });

  $('#example').html(iframe);
});

Answer 4

http://api.fatherstorm.com/test/4159620.php

using jQuery for this...

$(document).ready(function() {
   $('#fb-root').append('<iframe/>');
   $('#fb-root iframe')
        .attr('id','my_iframe')
        .attr('src','http://www.cnn.com')
        .css('width','100%')
        .css('height','100%')
        .attr('frameborder','no');
 });