how to load instagram page into frame.
The code that I wrote below blocks the page of instagram
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="https://www.instagram.com"></iframe>
<button> Start </button>
</body>
</html>
Short answer: you can't.
Long answer: instagram uses the HTTP header x-frame-options: SAMEORIGIN, so the web browser will not show the page in a <iframe> tag.
Related
When I use vscode to add audio and pictures to an HTML file, I use "open with live server" to debug, but every time the pictures and audio are not loaded.
However, when I quit vscode and open it directly with a browser, it can load the pictures and audio normally.
I don't know what the reason is, is there a problem with the vscode?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer" />
<title>Document</title>
</head>
<body>
<img src="F:\LABORATORY\HMpy\images\me1.png">
<audio src="F:\BaiduNetdiskDownload\women.mp3" controls ></audio>
</body>
</html>
Please put your audio and image next to your html file and use relative path.
like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer" />
<title>Document</title>
</head>
<body>
<img src=".\me1.png">
<audio src=".\women.mp3" controls ></audio>
</body>
</html>
How can I achieve pinch-zoom functionality on a mobile device at a local level (i.e. not the whole page) without needing to use Javascript? So far I can pinch-zoom the whole page through the use of the META viewport tag.
I have looked at CSS touch-action: pinch-zoom but bizarrely it doesn't do what its name suggests at all but apparently serves solely as a modified to other actions which have nothing to do with zooming. However, this page talks about how touch-action is supposed to work to allow native pinch zoom capability in the browser itself, which suggests that it should somehow be possible.
I have already tried to do this with IFRAMEs, but have apparently not hit on the right attributes needed to make it work:
pztest1.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pinch-Zoom Test IFRAME contents</title>
</head>
<body>
<H1>This is a test</H1>
<p>Test, test, test.</p>
</body>
</html>
This page by itself pinch-zooms, but only the entire page. So I put the contents in an IFRAME in another page:
pztest2.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Pinch-Zoom Test</title>
</head>
<body>
<h1>IFRAME test</h1>
<iframe src="pztest.html" height="640" width="480">
</iframe>
</body>
</html>
I am unable to pinch zoom at all in pztest2.html, neither in the body (which is expected) or in the IFRAME itself. If I remove the meta tag from pztest2.html, then I can zoom the body of pztest.html and the iframe with it, but I am unable to just zoom the IFRAME itself, which is the goal.
I used next HTML code as page, but Chrome just downloaded this page as file, not browsed as hypertext instead.
Address used: http://127.0.0.1:5151/
What's wrong with it?
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
<meta charset="UTF-8">
<title>Greeting</title>
</head>
<body>
<h3>Greetings!</h3>
Welcome to the Web Interface.<br/>
<br/>
What action are you want to do?<br/>
<br/>
1. Upload config<br/>
</body>
</html>
Headers used Content-Type: application/xhtml
Check if the file extension is .html instead of .hmlt or something else
JSBIN: http://jsbin.com/mucume/edit?html,output
JSFiddle: http://jsfiddle.net/ksvq4buc/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
Google
<br/>
Yahoo
</body>
</html>
In both the examples above, clicking on the links does not do anything. Why are anchor hyperlinks disabled on these sites
You need to open the browser's console to see the reason. Both sites show:
Refused to display 'https://www.yahoo.com/' in a frame because it set
'X-Frame-Options' to 'DENY'.
For more information on that, see https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options
I have these strange image urls that if I call direct in browser, an image shows up but when I use it in an img tag no image shows up.
http://thetvdb.com/banners/_cache/fanart/original/248951-1.jpg
I'm sure I'm making some silly mistake. Here is simple code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org
/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body>
<img src="http://thetvdb.com/banners/_cache/fanart/original/248951-1.jpg" alt=""/>
</body>
</html>
Any help?
The TV DB does not want to use their bandwidth to display an image on your site.
We don't allow any kind of hotlinking, you are only allowed to directly download the images and then use them as you see fit, you may not use us as a host.
They have taken steps to prevent you from doing this.
quentin#laptop:~ # curl -e http://example.com/ http://thetvdb.com/banners/_cache/fanart/original/248951-1.jpg
<html>
<head><title>403 Forbidden</title></head>
<body bgcolor="white">
<center><h1>403 Forbidden</h1></center>
<hr><center>nginx</center>
</body>
</html>