CODEWITHSUNDEEP
javascriptjqueryhtmlajaxiframe
defrex
defrex

Reputation: 16425

load a document string into an iframe

I have a string (fetched via ajax), which is an entire html document (doctype to < /html>). Does anyone know of a way to load it into an iframe?

I cannot simply specify the url that returned the document in the src of the iframe, since the response may have come from a post, and repeating it may have ill effects. Also, I can't submit it to the iframe the first time, since I can't predict absolutely that the result will be a document and not some json. Basically, I can't recall the url, I must be able to use the version I have (a string).

jQuery is fair game, since that's what I'm using.

Upvotes: 3

Views: 6231

Answers (2)

rtO
rtO

Reputation: 123

@LarsW one doesn't need to use jQuery. For example, if the html string is a file that resides in the filesystem but it is not accessible from www (or you have to construct it in PHP), you can use this PHP code

$htmlText = "data:text/html;base64,".base64_encode(file_get_contents("someFolder/file.html"));
echo "<iframe src='$htmlText'></iframe>";

I've had problems without base64 extension because quotes in file.html can break the HTML code.

Upvotes: 2

LarsW
LarsW

Reputation: 1588

You can do this using a data URI. A data URI is a way to load inline data as if you're loading external data. They look like this: data:<mimetype>,<data>. For HTML, the mimetype is text/html, and in your case, the data is something like this: <!DOCTYPE><html><head><title>Iframe</title></head><body>Hi!</body></html>. If we put this in a data URI, we get something like the following:

data:text/html,<!DOCTYPE><html><head><title>Iframe</title></head><body>Hi!</body></html>

When we set this as the src of the iframe, it looks like this.

var string = '<!DOCTYPE><html><head><title>Iframe</title></head><body>Hi!</body></html>',
  iframe = $('#iframe')

iframe.attr('src', 'data:text/html,' + string)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="iframe" src=""></iframe>

Upvotes: 3

Related Questions