How to insert HTML/CSS code into an iframe?

Question

So here's the code I have so far which basically renders an iframe that contains a URL.

<title>Test Layout</title>
    <style type="text/css">
        body, html
        {
            margin: 0; padding: 0; height: 100%; overflow: hidden;
        }

        #content
        {
            position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
        }
    </style>

<div id="content">
<iframe width="100%" height="100%" frameborder="0" src="http://jcrew.com" /> 
</div>

What I want to do is instead of passing a URL into the iframe, I want to pass a HTML file (with CSS in it) and just display that. So I'll pass raw HTML (could be a String) and I want the iframe to contain that. Any ideas?

I'm also using rails for the rest of my web app. I'm working with a home.html.erb file.

Is there a way to do this without using Javascript? If not, how do I get Javascript to work in my Rails app?

Thanks.

Possible duplicate of [Insert content into iFrame](http://stackoverflow.com/questions/21795761/insert-content-into-iframe) — Jacob G, Jun 02 '16 at 21:12
do you have a reason to do this in an iframe as opposed to just rendering the html as a string? — Peter P., Jun 03 '16 at 00:06

score 0 · Answer 1 · answered Jun 03 '16 at 12:56

0

try this it may help you

<iframe src="/pdfjs/web/viewer.html" style="width: 100%; height: 1100px; display:inline-block "  scrolling="yes" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="no"></iframe>

answered Jun 03 '16 at 12:56

VijayGupta

637
3
11

Thank you, didn't know you can display get requests like this. – john2131 Jun 03 '16 at 14:25

score 0 · Answer 2 · answered Jun 03 '16 at 13:05

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2883.402927903083!2d10.394408315785519!3d43.72295585593467!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d591a6c44e88cd%3A0x32eca9b1d554fc03!2sLeaning+Tower+of+Pisa!5e0!3m2!1str!2str!4v1464959090343" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

How to insert HTML/CSS code into an iframe?

2 Answers2