I am unable to load any HTML files in my VueJS iframe, except for the index.html located in the public

Within the template of my vue component, I am utilizing the following code:

<iframe width="1000vw" height="600vh" src="../../public/myHtmlFile.html"></iframe>

Unfortunately, the file specified in the src attribute is not loading correctly. Instead, it seems to be loading the content from the public/index.html file. How can I ensure that myHtmlFile.html loads properly within the iframe?

Please note that I encountered the same issue when attempting to load myHtmlFile.html from a different src/components folder.

javascripthtmlvue.jsiframe

Answer №1

Imagine your server is up and running at http://localhost:3000.

The src for the iframe is set to 

http://localhost:3000/../../public/myHtmlFile.html
. This URL is invalid, as it does not follow a relative path format like in a file system.

In reality, the public/ directory serves as the root of the server by default. Therefore, 

public/myFile.txt === http://localhost:3000/myFile.txt
.

Experiment with this code snippet:

<iframe width="1000vw" height="600vh" src="/myHtmlFile.html"></iframe>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the EBUSY: resource busy or locked, open errno: -4082 error to appear while trying to build storybook 7 in next.js 13?

While attempting to create a storybook, I encountered the following error in my project: [Error: EBUSY: resource busy or locked, open 'C:\Users\ali\Desktop\Works\Design Systems\projects\storybook-test2\node_modu ...

javascriptreactjsnpmnext.jsstorybook

What is the best way to add multiple classes to an HTML element?

Can a single HTML container have more than one class assigned to it? For example, would the following code work: <article class="column wrapper"> ...

htmlcss

Experience the ultimate entertainment with Flowplayer by watching multiple videos simultaneously in two separate views

I have two separate players in two different views within the DOM. Each player retrieves a video file asynchronously from my database using a unique ID. The first player functions correctly, but I am uncertain how to replicate this for ...

jqueryajaxhtmlflowplayer

Difficulty clearing dictionary in Vue.js causing issues with the DOM not updating

Check out this jsfiddle example I am working with a dictionary in Vue and using a v-for loop to render its items. I want to clear the dictionary, but simply setting it to an empty object or deleting keys doesn't trigger a re-render in the DOM. Any su ...

vue.js

What is the reason behind installing both Typescript and Javascript in Next.js?

After executing the command npx create-next-app --typescript --example with-tailwindcss my_project, my project ends up having this appearance: https://i.stack.imgur.com/yXEFK.png Is there a way to set up Next.js with Typescript and Tailwind CSS without i ...

javascriptreactjstypescriptnext.js

Halt hovering effect after a set duration using CSS or Vanilla JavaScript

Looking for a way to create a hover effect that lasts for a specific duration before stopping. I want the background to appear for just 1 second, even if the mouse remains hovering. Preferably using CSS or JavaScript only, without jQuery. To see my curren ...

javascriptcsshover

Ways to alter the typography style if the text exceeds a certain length

I need some assistance with using Material UI in my ReactJs project with TypeScript. I am trying to decrease the font size of typography when the text exceeds 3 lines. Here is a snippet of my code: const checkFontSize =() => { if(text.leng ...

javascriptreactjsmaterial-ui

Retrieve information from the text input field and proceed with the action outcome

Currently, I am in the process of developing a form on an asp.net website. The objective is to have users land on a page named Software, where two variables are checked for empty values upon loading. If the check reveals emptiness, the Software View is ret ...

htmlasp.net

Vue.js parent component not receiving data emitted by child component

Below you will find the child and parent components. I am struggling to pass data from the child component to the parent component. Can you help me pinpoint where the issue may be? Child Component <template> <div> <v-btn class="r ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Is dynamic data supported by Next.js SSG?

I'm currently developing a web application with Next.js and I need clarification on how Static generated sites work. My project is a blog that necessitates a unique path for each blog entry in the database. If I were to statically generate my web appl ...

javascriptreactjsnext.js

Controls that shift a DIV in either direction

I've been working on making a div scroll left or right with either a mouseover effect or click, but I can't seem to figure out what's going wrong. My initial attempt was straightforward: <body> <div id="innerscroll"></div> ...

javascriptjqueryanimation

The progress indicator for AJAX file uploads is malfunctioning; the addEventListener('progress') method is not functioning as intended

For some reason, the event progress listener isn't firing in AJAX when using Chrome web browser. However, when simply using the form submit function to the form action, the file uploads as expected. Even though the file is uploading behind the scenes ...

javascriptajax

Influencing location preferences in Google's place search

I'm currently implementing a Google Places search feature and I need to enable "Location Biasing" for the GCC countries (UAE, Saudi Arabia, Oman, Kuwait & Bahrain). My goal is to achieve the functionality described in the following link: https://deve ...

javascriptgoogle-mapsgoogle-maps-api-3geolocation

Delivering VueJS Builds via Express.js by leveraging history mode

I am trying to find a way to serve vue js dist/ through express js while using the history router in my vue js app. Here are some of the API calls I need: api/ s-file/sending/:id terms/get/:which I came across a Python solution on Github, but I'm ...

node.jsexpressvue.js

Arranging elements on top of a fixed element using JavaScript and CSS

Currently, I am implementing Javascript code that adds a div to the body of pages. The purpose of this div is to always stay at the top of the document or window, regardless of the page's design and content. Everything was functioning correctly until ...

javascriptcss

XMLHttpRequest Error: The elusive 404 code appears despite the existence of the file

This is the organization of my project files: The folders Voice, Text, and Template are included. https://i.stack.imgur.com/9un9X.png When I execute python app.py and navigate to localhost http://0.0.0.0:8080/, the index.html page is displayed with conte ...

javascriptpythonajaxxmlweb.py

angular.js watch() method is not functioning properly during a JSON call

I am trying to trigger a method whenever the value of my $http.selectedSong (model value) changes, but for some reason it is not working. Any ideas on why this could be happening?: app.controller('songController', ['$http', function($h ...

javascriptjsonangularjs

Create a script that will split a single block of text into separate sections based on predefined conditions

I have developed a script using Tampermonkey which modifies a value on a specific webpage. On the webpage, there is an input box with the value "FPPUTHP1100000". This value is a material code with the following structure: F represents FRESH PPUTHP repr ...

javascriptjqueryreactjsvar

Is there a way to set a custom width or make the description responsive?

Is there a way to ensure that the description is responsive and automatically goes to the next line instead of extending horizontally? Although using textField could fix this issue, I also need to adjust the padding and outline. Are there any alternative s ...

javascriptreactjsmaterial-ui

What is the best way to create a JavaScript animation for altering the width of a div element?

Need help with creating a dynamic poll chart based on YES and NO votes? Check out this project where you can visually see the results by clicking HERE. Looking to add some animation effects to your poll? You can achieve a smooth transition using CSS with ...

javascripthtmlcssanimation