Specifying Content of an Iframe Instead of the Src Attribute to a Page

iFrame loaded the page source of src attribute instead of rendering it

As per CBroe's suggestion, I'm going to assume that the server wasn't setting the Content-Type header when serving pageThatRedirects.html

Iframe without src but still has content?

Yes, it is possible to load an empty <iframe> (with no src specified) and later apply content to it using script.

See: http://api.jquery.com/jquery-wp-content/themes/jquery/js/main.js (line 54 and below).

Or simply try:

<iframe></iframe>

<script>
document.querySelector('iframe')
        .contentDocument.write("<h1>Injected from parent frame</h1>")
</script>

HTML frame SRC-attribute - use html-code instead of URL

maybe you could inject HTML into the iFrame/Frame like described in this article:Injecting HTML into an IFrame by Michael Mahemoff.

Something like this:

var content = "<html><body><b>Hello World!</b></body></html>";

var iframe = document.createElement("iframe");
    document.body.appendChild(iframe);

var frameDoc = iframe.document;
    if(iframe.contentWindow)
        frameDoc = iframe.contentWindow.document; // IE
    // Write into iframe
    frameDoc.open();
    frameDoc.writeln(content);
    frameDoc.close();

HTH,

--hennson

Html code as IFRAME source rather than a URL

You can do this with a data URL. This includes the entire document in a single string of HTML. For example, the following HTML:

<html><body>foo</body></html>

can be encoded as this:

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E

and then set as the src attribute of the iframe. Example.

Edit: The other alternative is to do this with Javascript. This is almost certainly the technique I'd choose. You can't guarantee how long a data URL the browser will accept. The Javascript technique would look something like this:

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

Example

Edit 2 (December 2017): use the Html5's srcdoc attribute, just like in Saurabh Chandra Patel's answer, who now should be the accepted answer! If you can detect IE/Edge efficiently, a tip is to use srcdoc-polyfill library only for them and the "pure" srcdoc attribute in all non-IE/Edge browsers (check caniuse.com to be sure).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

set the src attribute of an iframe, then load into page, using javascript

You should do a console.log on the location.search. It gives you a string you need to parse, e.g., "?key=value&key2=value2&etc=another+value". I think you might need to address that.

So if where it says list= needs to be just tupac, you're going to need to convert your search string from a string that looks like this: ?query=tupac to a string that looks like this tupac by doing something like:

var query = location.search.split('=')[1];

What this does is it splits the string up into two pieces, using the = sign to divide them, then using [1] to select the second piece (array indices start from 0). Then you'll have just the tupac portion of the string (or whatever the query string is for [e.g., U2]).

If your query string has multiple parameters, you needs to parse each of those first, e.g., if your query string looks like this:

?somekey=somevalue&query=tupac&someotherkey=some+other+value

you're going to need to do something like this:

var query;
location.search.split('&').forEach(function(piece) {
    if (piece.indexOf('query=') !== -1)
        query = piece.split('=')[1];
});