admin管理员组

文章数量:1386666

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 e 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.

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 e 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.

Share Improve this question asked Aug 17, 2009 at 15:25 defrexdefrex 16.5k8 gold badges36 silver badges45 bronze badges 1
  • Here's how. – Darin Dimitrov Commented Aug 17, 2009 at 15:33
Add a ment  | 

2 Answers 2

Reset to default 3

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="iframe" src=""></iframe>

@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.

本文标签: javascriptload a document string into an iframeStack Overflow