In VSCode, is it possible to open a new pane pointing to an http url? I have a server running locally (on port 8080). I want to open it as a WebView. I couldn't find anything that provides this in the WebView API docs.
The functionality I'm looking for is similar to the snippet, except with the url opening in the VSCode editor iteself.
vscode.commands.executeCommand('vscode.open', vscode.Uri.parse('http://locahost:8080'));
You can achieve by using an iframe within webview https://code.visualstudio.com/docs/extensions/webview
// And set its HTML content
panel.webview.html =
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
</head>
<body>
<iframe width="100%" height="100%" src='http://locahost:8080'> </iframe>
</body>
</html>`;
Related
I am using visual studio code .I have the php extension installed already . But it is very repetitive to create each php file with the base structure like this one . Since it does'nt automatically insert it for me .
<!DOCTYPE HTML >
<HTML lang="en">
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Is there anyway or short key to quickly copy this structure into the newly created php file ? without using control+C control+V from a note ?
If you are using VS code then you can use this command shift + 1 and enter to auto-populate HTML Doctype in HTML or PHP.
When you will press enter it will add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
press---> Shift+1 + enter or tab
OR
press----> html:5 + enter or tab
Note:- In VS-Code.
Type !, and then click the first snippet in the auto complete. It will generate the default HTML template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Or, you can use snippet to add your own code, and this should help you
I don't know why. just ! doesn't work for me, but when I type html5 or html:5 and use autocomplition, it works like a charm.
This morning, I was able to view vscode intellisense suggestions with PIXI.js.
My index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fun with PIXI</title>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
My index.js:
const app = new PIXI.Application();
document.body.appendChild(app.view);
Serving the file and running index.js is fine. I am just so annoyed that I lost intellisense suggestions for PIXI.js (or any third party libraries). I still do see Intellisense suggestions working for DOM APIs (i.e. document methods, etc...)
I have saved the source of sample AMP video http://amp.azure.net/libs/amp/latest/samples/dynamic_setsource.html locally and trying to play video. It works in IE and Edge but not in chrome. if i host this file it works.
Can you please help me understand what is wrong here?
You can try running script in IE an Chrome to see the difference.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Skill Cloud</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://amp.azure.net/libs/amp/1.7.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="http://amp.azure.net/libs/amp/1.7.1/azuremediaplayer.min.js"></script>
</head>
<body>
<h1>Skill Cloud</h1>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
<script>
var myOptions = {
autoplay: true,
controls: true,
width: "100%",
height: "auto",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
</script>
<footer>
<br />
<p>© Microsoft Corporation 2016</p>
</footer>
</body>
</html>
Thanks
When you run the code locally, Chrome opens your index.html with the file:// protocol. Due to Chrome's security policy local resources aren't allowed to be loaded and that's what's preventing playback. (If you check out your JavaScript console, I bet you'll see a similar error.)
To workaround this, you can use an IDE like Visual Studio or WebMatrix that will automatically set up a local web server for you so you can access your page with http://localhost:8000 or whichever port you prefer.
If you don't want to use VS or WebMatrix, you could also use Python's Simple HTTP server. Hope this helps and happy coding :)
I want to convert my website to mobile application with Intel XDK. So , how to do this with web view.I want to load the URL on the current web view not open it on a new page with the native browser.
Easy way is to use window.location= to load URL:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<script src="cordova.js"></script>
</head>
<body>
<script>
window.location = "http://www.yourwebsite.com";
</script>
</body>
</html>
Better way is to use InAppBrowser and connection Cordova plugins to load website, so that you can handle connection loss and reload, it will load complete website in background and then display, here is code: https://github.com/krisrak/html5-cordova-webapp
I'm using the latest Samsung smart TV simulator and developing a very simple app for it: Play a video.
The code is show as below. The code is so simple that I can not find the root cause (can not play video). I verified it on mac safari and chrome web browser.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>basicexample</title>
</head>
<body background="http://icbd.tv/wp-content/uploads/2012/06/background.jpg">
<video id="video" src="http://www.808.dk/pics/video/gizmo.mp4" autoplay="autoplay">Your browser does not support the video tag.
</video>
</body>
</html>
Samsung SDK does not support autoplay attribute. To play video you need to manualy start it:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>basicexample</title>
</head>
<body onload="document.getElementById('video').play(1)" background="http://icbd.tv/wp-content/uploads/2012/06/background.jpg" >
<video id="video" src="http://www.808.dk/pics/video/gizmo.mp4" autoplay="autoplay">Your browser does not support the video tag.</video>
</body>
</html>
This code plays video on 2011-2013 Emulators. 2010 does not support <video> tag.