I an writing an vue3 web app using vite. I am using an dev framework call vue-vben-admin.
I try to embed an local html into iframe, but the iframe page keep showing the homepage
I put "test.html" in public/static/test.html
so my iframe page would be
<iframe id="f1" ref="frame1" :src="'static/test.html'"></iframe>
<iframe id="f2" ref="frame2" :src="'/static/test.html'"></iframe>
either ways it just won't work as expected.
The actual iframe url is "https://localhost:3100/static/test.html"
It seems that won't be an 404 problem because when I use Image, the following code work fine:
<Image src="/resource/img/logo.png" />
For me it just worked when I added the html file to the public folder, but then I had to omit the '/static', so I used
<iframe id="f1" ref="frame1" :src="'/test.html'"></iframe>
Related
I am using lazy sizes for the lazy load of my youtube videos. On every page the lazy load does work, but not on these two, more precisely, the whole video just disappears/is not displayed. The two pages are in the same folder as all other pages, which do work. The link to lazysizes.js is there <script src="lazysizes.min.js" async></script>
Here is the iframe on one of the working pages with the video being displayed:
<iframe width="640" height="360" data-src="https://www.youtube.com/embed/xxx?rel=0" importance="low" loading="lazy" frameborder="0" class="lazyload" allow="encrypted-media" allowfullscreen></iframe>
and here the iframe that just won't work/does not display the video - it's identical:
<iframe width="640" height="360" data-src="https://www.youtube.com/embed/3FOZ2CTaaWk?rel=0" importance="low" loading="lazy" class="lazyload" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
I know this just doesn't make sense, but my hope is that one of you stumbled upon the same problem. I have tried copying and pasting (swapped them, so it is not really the iframe code) and changing it, reloading the js etc. but nothing helps. The iframe is identical with the other pages. I have no idea how to find out what's missing here.
I'm stupid, the console revealed it: the lazysizes.min.js was loaded into the directory of this particular URL. Since this URL (and its /.../ directory) is artificially created the lazysizes.min.js could not be found in that directory (though on the FTP server the js file is in the same directory as the source php file that loads it) it could not be loaded.
A simple line of extra code that includes the lazysizes.min.js above the iframe embedment with an absolute URL to the js file solved the problem!
I am facing this weird issue when working with iframes.
I have a page(jsp) based on spring portlet framework which I want to render in an iframe. I made a dummy iframe and it was working perfectly fine in both IE(iE11) and Chrome when i was testing with my local server. However once the code got deployed to the dev server, the iframe renders the first page in IE, but does not render the next page on click of a button on that page. It is still working perfectly fine in chrome. I have no idea as to why that is happening.
Here is the code for my dummy iframe :
<html>
<head>
<title>IFRAME DEMO</title>
</head>
<body>
Forgot Username
Forgot Password
<iframe src="" width="82%" height="800" name="sampleFrame">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
After reading some oldthreads, I figured out that I need to add the domain to the trusted site of IE and that solution worked. However this iframe will be exposed to the end user and I cannot expect every user to change this setting. Can we enforce it at server level somehow ?
I have an iframe - the iframe works when the src points to a page on the same server, allowing me to embed pages.
The same iframe will not allow me to embed pages from another server. I have tried different src= pages and different browsers on Windows, OSX and Linux. I have tried hard-coding the src attribute and setting it programatically.
I haven't worked w html for years and know click-jacking has caused some hosts to disallow their content but am confident this is not the issue.
<iframe src='myPage.html' name='i' id='i'></iframe>
works as expected
<iframe src='http://theirServer/theirPage.html' name='i' id='i'>
</frame>
does not work as expected
Not all sites allow you to embed them via iframe (such as google). if using Chrome, check your console. If you have an error like "Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." then the site does not allow you to embed it.
Basically if the site uses the header X-Frame-Options, and has it set to SAMEORIGIN, there's nothing you can do.
Our web page uses dynamically generated svg from an ashx page. This works in IE8 and earlier using the Adobe SVG plugin. It does not work in IE9 (including compatibility mode). We are using the <object> tag. I am trying to modify the page to work with IE9.
I was able to get SVG to render with a simple test svg I found on the web using:
<embed src="http://oursite.com/circle1.svg" type="image/svg+xml"
height="200" width="550"/>
However if I change this to:
<embed src="http://oursite.com/ourhandler.ashx?t=Circle&v=1&ext=.svg"
type="image/svg+xml" height="200" width="550"/>
I get a blank box with a disabled vertical scrollbar.
The output of "ourhandler.ashx?t=Circle&v=1&ext=.svg" is the same content as "circle1.svg" and browsing to http://oursite.com/Ourhandler.ashx?t=Circle&v=1&ext=.svg directly renders correctly in IE9.
What do I need to do to make dynamically generated svg work in IE9? I am not attached to the <embed> tag, but have not had any luck with other methods (such as the <object> tag).
Check if you allow HEAD requests for your handler. IE used to have two GET requests : one for the content-type and one for the object. Now the first request is HEAD, so if the verb is not allowed, the second request won't work.
works for me in all browsers:
http://jsfiddle.net/mihaifm/n8DWe/3/
Maybe it's an issue on how you're encapsulating the embed.
I have the same problem too.
I use Fiddler to trace the problem, then I found that the element didn't post a request to the URL specified by "scr" attribute.But it do request when the ext of "src" starts with ".svg".
Finally I found a solution.
Step 1
I change the src to something like (use ".svgx" ext)
<embed src="http://oursite.com/ourhandler.svgx?t=Circle&v=1"
type="image/svg+xml" height="200" width="550"/>
Step 2
Write a HttpModule to Rewrite the URL to your real URL.
In your case the real URL is http://oursite.com/ourhandler.ashx?t=Circle&v=1&Ext=.svg
I'm using embed code to do live stream and the embed code like youtube one works perfectly
but some of them I have to use code such as iframe the fullscreen feature doesn't work.
<iframe src="linkhere" width="600" height="450"/>
and I can not toggle the video into fullscreen
will it be any possible way to make it fullscreen if they click on the option?
or will it be any other embed code that similar to iframe to use?
Your problem could be that the flash plugin recognises iframe as your "fullscreen"..
When looking at the youtube embed code, i recognised a function "allowfullscreen" within the iframe definition
make sure you also have this part in your code..
<iframe width="560" height="315" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0" **allowfullscreen**></iframe>
else there might be another option beside an iframe..