Hi I am using vscode webview api to show some webpages from local server
the key part (form) of the source code of the webpage is like this. It has a button and will launch a post request when clicked. therefore it can update its content
<form method="POST" action="">
<div class="form-group"><label for="start">Start Date:</label><input id="name" type="date" name="start" value="2019-01-01"
class="form-control"><label for="end">End Date:</label><input id="name" type="date" name="end" value="2019-01-04"
class="form-control"></div><button type="submit" class="btn btn-primary">generate report</button>
it works fine when opening with browser. But when launching it in vscode, nothing shows and vscode tells me it prevented webview navigation when using webview api
the part of code that using webview api is like this
public async showDetailedReport(){
const param: IRequestParam ={
endpoint:'localhost',
method:'GET',
port:23333,
path:'/report/detailReport'
};
try{
const html: string = await sendRequest(param);
const panel = vscode.window.createWebviewPanel(
'Report',
'Report',
vscode.ViewColumn.One,
{
enableScripts:true,
}
);
panel.webview.html = html;
} catch(e){
await vscode.window.showErrorMessage(e);
}
}
So my question is why that happen and how to solve it, which I mean, to send post or redirected to other webpages. Anything can be helpful. Thanks with grateful.
As of VS Code 1.31, webviews may only display a page of html content and may not navigate to other resources (such as making a POST request using a form).
You can still make requests using fetch or similar APIs, but standard POST submit form will not work.
Related
I've browsed various resources but I seem to be unable to get this to work on a Raspi that is supposed to be used for digital signage. Chromium does start up in kiosk mode, loads the webpage and autofills the saved credentials but I still need to click on 'sign in' on this button:
<button name="button" type="submit">Sign in</button>
I can't do that however, since there will be no keyboard/mouse attached when the Raspi is eventually installed in the store. How can I automate the click? I've try the Chrome extension Auto Login but it does not work in kiosk mode.
You could specify the starting page with an extra param like '?kiosk=1', then have a javascript snippet onload check for this param and auto-submit the form after 'n' seconds to account for any delays in filling the password.
<body onload='init()'>
<form id="login-form">...</form>
<script>
function init() {
const params = new URLSearchParams(window.location.search);
if (params.has('kiosk')) { //check if ?kiosk is defined in URL
setTimeout(
function () { document.getElementById("login-form").submit(); },
1000
);
}
}
</script>
</body>
This question already has an answer here:
Moving google apps script to v8 file upload stopped working from sidebar
(1 answer)
Closed 2 years ago.
I don´t know if there is a way on making this work, but I want to make a form with input type=file.
But when I submit the form it won't work cause of the input type=file and cause of my access permission is set to me only in the Google Apps Script.
Well the code goes like this, I'm just showing the base code which I'm having trouble with. Whenever I remove the line with the input file it will submit the form and add in a spreadsheet the value I've input in the first name text box. And I've notice that it also works when I leave the input file line, when I change the permissions in my script, when I publish the code as a web app, and in the "Who has access to the app" put "Anyone, even anonymous", the thing is that I don't want that anyone could access the webapp. I'm just thinking on rewritting the gs code to check the user accessing the web app, but I'm not sure if this would be safe.
GS Code:
function doGet() {
var template = HtmlService.createTemplateFromFile('HtmlName');
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);}
function processForm(formObject) {
var formBlob = formObject.myFile;
var driveFile = DriveApp.createFile(formBlob);
var firstName = formObject.firstName;
DriveApp.getFolderById("anyID").addFile(driveFile);
ss.appendRow([formObject.firstName,
]);}
Html File
<!DOCTYPE html>
<html>
<body>
<form class="w3-container" id="myForm" onsubmit="handleFormSubmit(this); ">
<p>
<input class="w3-input" name="myFile" type="file">
<input class="w3-input" type="text" name="firstName">
<p>
<input class="w3-button" type="submit" value="Submit">
</form>
</body>
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
}); } }
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
}
</script>
</html>
There is a known issue regarding the use of <input type="file" /> on Google Apps Script HTML Service when using the new default runtime (Chrome V8)1. As your code isn't using features not supported by the old runtime, try to disable the new runtime (click on Run > Disable new Google Apps Script runtime powered by Chrome V8).
If disabling the new runtime doesn't work try using FileReader.
NOTES:
See Tanaike's answer to Moving google apps script to v8 file upload stopped working from sidebar
I am creating a project where when I type a url in my web browser it activates a gpio pin on my esp8266 and that works (192.168.2.5/gpio/1). Now I am trying to make a button on my webserver, that when it is pressed it activates that link while staying on the webserver. I dont know if I need http post or what. It doesn't send any data or anything just go to that URL and the pin is activated so I need to implement that as a button on my webserver. If someone can help that would be amazing!
Your web browser is sending a GET request to 192.168.2.5/gpio/1 so you need to mimic that with your code. Use a GET request.
It might help you in the future to get familiar with the different HTTP verbs and what they mean.
Try the below snippet with jQuery.
HTML:
<input type="button" id="getmepin" value="get me pin" name=">
JS:
$( "#getmepin" ).on( "click", function() {
$.get( "192.168.2.5/gpio/1", function( data ) {
console.log( data );
console.log( "Load was performed." );
});
});
Currently, our app posts to users' friends' walls via Graph API. However, Facebook is deprecating this functionality so we are migrating to the Feed Dialog per Facebook's recommendations (see the February 6, 2013 section at https://developers.facebook.com/roadmap/).
Now, we know we can specify the recipient as part of the Javascript SDK call (note FB.init() is called elsewhere earlier on the page):
<p><a onclick="launchFeedDialog(); return false">Testing the Feed Dialog</a></p>
<script>
function launchFeedDialog() {
// calling the API ...
var obj = {
method: 'feed',
to: 'RECIPIENT NAME', // Can specify recipient here
link: 'http://example.com',
name: 'Test post',
description: 'Test description'
};
FB.ui(obj);
}
</script>
However, it does not seem like the user can modify the recipient in the launched dialog. A screenshot of what I mean is at http://i.imgur.com/oLPTO.png.
Is there some way of invoking the Feed Dialog so that the user can change/add recipients, like in the Send Dialog?
The flow we are trying to implement (and the way it currently is) is:
User clicks a button to launch the Feed dialog
User fills in the Feed dialog (including recipient) and submits
Right now, we are stuck with this awkward flow:
User fills out a custom control specifying the recipient
User clicks a button to launch the Feed dialog
User fills in the Feed dialog and submits
OK, we found a workaround. The general idea:
Display the Feed Dialog inline as an iframe (by specifying display=iframe)
Create your own custom control for selecting a recipient Facebook username or id
Reload the iframe asynchronously upon selecting a recipient or onblur, etc
Some caveats/reasoning for above:
You can't use the JS SDK because it will launch the iframe version of the Feed Dialog as a modal lightbox (rather than inline in your page flow)
You'll need to implement a redirect page that does post processing, such as updating the state of the parent window, logging results, etc
For (2), the custom control can be as simple as a text input field, but you'll probably want at least some sort of autocomplete. This is actually not too tricky, as you grab your user's friend list with the https://graph.facebook.com/me/friends Graph API call.
Here's a basic example using a simple text input:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div>
Recipient's FB username:
<input type="text" id="fb-recipient" placeholder="Recipient's FB username"></input>
<input type="submit" id="fb-recipient-submit" value="Pick" />
</div>
<iframe id="fb-feed-dialog" width="586" height="330" frameborder="0" allowfullscreen></iframe>
<script>
$('#fb-recipient-submit').click(function(e){
e.preventDefault();
var feedUrl = 'https://www.facebook.com/dialog/feed?';
feedUrl += 'display=iframe';
feedUrl += '&app_id=' + 'YOUR_APP_ID';
feedUrl += '&access_token=' + 'ACCESS_TOKEN';
feedUrl += '&link=' + 'SHARE_LINK';
feedUrl += '&redirect_uri=' + 'REDIRECT_URI';
feedUrl += '&to=' + $('#fb-recipient').val();
$('#fb-feed-dialog').attr( 'src', feedUrl );
});
</script>
</body>
</html>
You can find a screenshot of a slightly more fleshed out solution at: http://i.imgur.com/0jTM391.png
I am developing a simple Dojo application. I have a bit of a problem with my forms.
I have a form like this:
<form data-dojo-type="dijit.form.Form" data-dojo-attach-point="loginForm" method="POST">
<label for="${id}_login">Login</label>
<input name="login" id="${id}_login" data-dojo-attach-point="login" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="required:true"/>
<label for="${id}_password">Password</label>
<input name="password" id="${id}_password0" data-dojo-attach-point="password" data-dojo-type="app.ValidationPassword" />
<input type="submit" data-dojo-attach-point="loginButton" data-dojo-type="app.BusyButton" label="Login!" />
</form>
In the app I have:
this.loginForm.onSubmit = function(e){
// Do Ajax calls etc.
// ..
// Prevents actual submission
return false;
}
However, if anything goes wrong with the Javascript before that "return false", the form is actually submitted, which results in an error (my node app will return Cannot POST /login as there is no POST action defined for that URL).
How can I make 1000% sure that the form doesn't get submitted in any case? I know I could get rid of the tag altogether since I do everything with Ajax, but... then I wouldn't get the nice data = that.loginForm.getValues(); for example. (I mean, it is a form after all)
(NOTE: I am NOT interested in non-javascript downgrading, really. The app is a 1-page ajax app, and there is no point in getting it to work if the user doesn't have AJAX) )
preventDefault will stop the browser from performing the default action (ie: submitting).
this.loginForm.onSubmit = function(e){
e.preventDefault();
// Do Ajax calls etc.
// ..
}
See here for more information.