Reference HTML file in iframe
-
Hi guys, I need to open an static HTML file inside an iframe because I need it to be printed silently, I’m trying setting the iframe src with absolete and relative paths but none of them work, I’ve tried moving my files inside public, static and assets folders with no success, I’ve seen that some people uses process.env.BASE_URL to access absole path of environment but it doesn’t work in Quasar.
Currently I have my files in a folder called ticketTemplates inside public folder placed at root, and it has two files: template1.html and template1.css, I’m doing the following:
<iframe src="ticketTemplates/first.html" frameborder="1"></iframe>
But as I said before it does not with relative or absolute paths.
Could you tell me how to achieve it? -
@Jonalxh Are you doing this during
quasar dev
or on a deployed site? Can you try to access the files directly first? i.e.http://localhost:8080/ticketTemplates/first.html
Does it show? Also check the network inspector in chrome / firefox and see if any headers like
x-frame-options
is set on that response. It shouldn’t be there during the dev server but could be on production depending on your server settings. -
Hi @beets I’ve tried with
http://localhost:8080/ticketTemplates/first.html
and result is the same:Cannot GET /ticketTemplates/first.html
I’m just executing quasar dev in development, not in production.
-
@Jonalxh Can you run
quasar info
to get the version you’re using?$ quasar info ... Important local packages quasar - 1.15.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 2.1.14 -- Quasar Framework local CLI @quasar/extras - 1.9.12 -- Quasar Framework fonts, icons and animations ...
Run the command and paste the above three lines here so we can check which version of quasar you’re on. You mention both the static and public folder, with the former on quasar/app v1 and the latter on v2.
Assuming you are on quasar/app v2, just to make sure, the public folder is in the root of your project, next to quasar.conf.js and the ticketTemplates folder is inside that, correct?
-
quasar info result is:
Important local packages quasar - 1.14.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 1.9.6 -- Quasar Framework local CLI @quasar/extras - 1.9.12 -- Quasar Framework fonts, icons and animations
The answer of your question is correct, public folder is in root beside quasar.conf.js and ticketTemplates folder is inside.
-
@Jonalxh Okay, so you’re using
@quasar/app 1.9.6
, which doesn’t use the public folder. Instead you would usesrc/statics/ticketTemplates
. It sounds like you may have tried it, but perhaps the statics folder wasn’t inside thesrc
folder. In any case, try moving it to the statics folder again and tryhttp://localhost:8080/ticketTemplates/first.html
Note that if you do want to upgrade to quasar/app v2, you’d have to follow this 5 minute upgrade guide: https://quasar.dev/quasar-cli/app-upgrade-guide . Make sure you work on a new git branch or otherwise save all changes before attempting to upgrade, just in case.
-
Sorry I just had a look at the older docs, after placing the folder in
src/statics/ticketTemplates
I believe you’ll need to access it ashttp://localhost:8080/statics/ticketTemplates/first.html
and<iframe src="statics/ticketTemplates/first.html" frameborder="1"></iframe>
-
You’re right, I’ve created a new project with updated resources and now it works.
In production it will be available in the same way (same url)?
Thanks a lot.
-
@Jonalxh It will in fact be the same in production. Basically just if you are pre quasar/app v2 you had to prepend statics/ to each path, which is why v2 introduced the public folder so you could have paths like
example.com/favicon.ico
from the public dir. -
Awesome, thanks a lot @beets .