Menu
I've fruitlessly looked for examples of using Meteor with an Iframe. (Note that I have to use an iframe instead of a DIV because of the content that will ultimately go there). I've tried both:
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click to see what you typed" />
<br>
<iframe id="compose" src={{> iframe-content}} height=600></iframe>
</template>
<template name="iframe-content">
<body>
<div contenteditable="true">
Edit me
</div>
</body>
</template>
This loads recursively, creating sub-Iframes continuously.
I've also tried
<iframe id="compose" src="content.html" height=600></iframe>
but Meteor munges the multiple HTML files together which also causes the iframe to fail.
The only thing that worked so far is SRCDOC instead of SRC, but that isn't well supported by multiple browsers like FF.
So, what's the trick to use an iframe within Meteor, preferably in the template rather than strictly through code?
677
You want the 'public' folder. Meteor leaves content in that folder alone, as described here: http://docs.meteor.com/#/full/structuringyourapp
Move 'content.html' into a folder named 'public' at the root of your project/app and reference it like so in the html:
<head>
<title>iframe</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
<iframe src="hello.html"></iframe>
</template>
To be clear for other readers, Meteor has no problem with iframes. The issue was with the location of the 'content.html' file the iframe referenced.
141
I don't understand your first code example:
<iframe id="compose" src={{> iframe-content}} height=600></iframe>
As far as I know, that's not how iframes work; you have to specify a url in the src attribute, you can't just put the actual HTML there. So that won't work.
As for the second example:
<iframe id="compose" src="content.html" height=600></iframe>
Where do you expect Meteor to get content.html if you haven't specified that that path exists? Since Meteor doesn't set up routing by default, there is no resource at /content.html. So you'd have to add the Meteor Router package or some similar routing mechanism, and then tell Meteor that when asked to serve /content.html, it should just return the content of some template. The challenging part is figuring out how to get Meteor to return "real" HTML and not the Meteor-wrapped live HTML construction that is usually served up.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
