I am trying to make a form that goes like this:
You enter a URL into a text box.
You click a button and it opens an about:blank page in a new tab.
This page has an iframe that fills the whole screen and the src is set to the link you entered in the text box.
This is what I have tried but whatever I choose opens blank, I am using google.com as the example here.
<!DOCTYPE html>
<html>
<head>
<title>about:blank | 3kh0</title>
</head>
<body>
<script>
function create() {
var url = document.getElementById('input');
var win = window.open();
win.document.body.style.margin = '0';
win.document.body.style.height = '100vh';
var iframe = win.document.createElement('iframe');
iframe.style.border = 'none';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.margin = '0';
iframe.src = url;
win.document.body.appendChild(iframe);
}
</script>
<input type="text" value="https://www.google.com/" placeholder="https://google.com" id='input' autofocus>
<button onclick='create()'>Create!</button>
</body>
</html>
If you have any ideas on how I can do this that would be amazing! :)
You should add ".value" at the end of line 9.
from
var url = document.getElementById('input');
to
var url = document.getElementById('input').value;
Related
I want to combine userinput from a textfield with a preset url,
to then form a new url that is to be written into the dom below after pressing a button
My current code looks like this:
<body>
<form>
<input type="text" id="pixivurl" value="4165980"/>
<input type="button" id="btn" value="pixivuserid"/>
</form>
<html>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('pixivurl').value,
src = ' val,
var link = document.getElementById("link");
var a = document.createElement('a');
var linkText = document.createTextNode("pixivuser");
a.appendChild(linkText);
a.title = "pixivuser";
a.href = "https://rsshub.app/pixiv/user/" + pixivuser";
document.body.appendChild(a);
}
</script>
</body>
</html>
The base url here is: https://rsshub.app/pixiv/user/
and it is supposed to have a numeral added right after, defined by userinpu.
(the default result in this case is https://rsshub.app/pixiv/user/4165980 )
I can't quite figure out the part to combine and then write into the dom below,
something might be missing ?
You just have some typing mistakes and then your code will work. The input with the id pixivurl has the user id. And you are getting it and assigning it to the href property of the link element. If you want the url to be also the text of the link element then put it in the textNode you have created.
<form>
<input type="text" id="pixivurl" value="4165980"/>
<input type="button" id="btn" value="pixivuserid"/>
</form>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('pixivurl').value;
var url = "https://rsshub.app/pixiv/user/" + val;
var a = document.createElement('a');
var linkText = document.createTextNode(url);
a.appendChild(linkText);
a.title = "pixivuser";
a.href = url;
a.style.display = 'block';
document.body.appendChild(a);
}
</script>
so i want to print pdf using button and javascript but it will always produce blank pdf/empty pdf. i want something like https://imgur.com/a/PsRqeBR, but i got this instead https://imgur.com/a/J7rzlSq
i try using window.open and then window.print but it still produce blank pdf, i also tried to put url inside window.open instead of declaring it first but that didn't work
HTML
<button type="button" onclick="printme()">click me...</button>
JavaScript
function printme(){
var URL = "https://www.detik.com/";
var W = window.open(URL);
W.window.print();
}
you need to do window.print() instead of w.window.print()
function printme(){
var URL = "https://www.detik.com/";
var W = window.open(URL);
window.print();
}
The source of the following code is Print an external page without opening it
which was mentioned in one of the answers here Printing a web page using just url and without opening new window?
I only modified the link to include your website address:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example</title>
<script type="text/javascript">
function closePrint() {
document.body.removeChild(this.__container__);
}
function setPrint() {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage(sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.style.width = "0";
oHiddFrame.style.height = "0";
oHiddFrame.style.border = "0";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
</script>
</head>
<body>
<p><span onclick="printPage('https://www.detik.com');" style="cursor:pointer;text-decoration:underline;color:#0000ff;">Print external page!</span></p>
</body>
</html>
If I set the URL to exmaple.com?blank=true a blank page should be presented.
Using JavaScript or jQuery i want a short snippet that looks for ?blank=true in the url and if it finds it than the page to turn white or blank.
Try like this
var url_string = "https://example.com?blank=true "; //window.location.href
var url = new URL(url_string);
var blank = url.searchParams.get("blank");
if(blank){
document.getElementsByTagName("body")[0].style.display = "none";
}
<body>
<p>this will be hidden</p>
</body>
wrap your html content in a element like this
<html>
<body>
<div id="wrapper">
<!-- ********your content here******** -->
</div>
</body>
</html>
use jquery code as
$(document).ready(function() {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('=');
if(sURLVariables[0]=="blank" && sURLVariables[1]=="true")
{$('#wrapper').css('display','none');}
else{
$('#wrapper').css('display','block');
}
});
With jQuery
var blank = /(?<=blank=)[^&?]+/g.exec('https://example.com?blank=true')[0];
if(blank === 'true'){
$('body').hide();
}else{
$('body').show();
}
I have a program that uses a form to receive a .png file from the user, which is then dynamically set as an img. The form seems to allow me to select a file, but does not display that file. I was under the assumption that I could set the src for the img as the variable(wscimginput) associated with the user's file, but that does not seem to be working? Is there another way I should approach this?
Here's the piece of code dealing with the form and the image.
var wscimgform = document.createElement("form");
var wscimginput = document.createElement("input");
wscimgform.appendChild(wscimginput);
_wsc.appendChild(wscimgform);
wscimginput.setAttribute("id", "wscimginput");
wscimginput.setAttribute("type", "file");
wscimginput.setAttribute("accept", "image/*");
var wscimg = document.createElement("img");
_wsc.appendChild(wscimg);
wscimg.setAttribute("src", "wscimginput");
wscimg.setAttribute("position", "absolute");
wscimg.setAttribute("height", "80%");
wscimg.setAttribute("top", "20%");
This is adapted from the linked article without jQuery.
<html>
<head>
</head>
<body>
<div id="formDiv">
</div>
<script type="text/javascript">
var f = document.createElement("form");
var fi = document.createElement("input");
fi.setAttribute("id", "daFile");
fi.setAttribute("type", "file");
fi.setAttribute("accept", "image/*");
fi.addEventListener("change", showPreview);
f.appendChild(fi);
var i = document.createElement("img");
i.setAttribute("id", "daImg");
i.setAttribute("width", "200px");
i.setAttribute("height", "200px");
f.appendChild(i);
document.getElementById("formDiv").appendChild(f);
function showPreview(ev) {
if (ev.target.files && ev.target.files[0]) {
var r = new FileReader();
r.onload = function (e) {
document.getElementById("daImg").setAttribute("src", e.target.result);
}
r.readAsDataURL(ev.target.files[0]);
}
}
</script>
</body>
</html>
I want to save the content of a TinyMce HTML editor by clicking on a button. The TinyMce is on a local installation, and I use it in Chrome.
I have see this answer and that one but I am not able to implement them.
When I click on the Save button, I don't get the download pop up, even though my code on JSfidle is working
So here is my TinyMCEnote.hmlt (save in desktop/TinyMceLocal)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function saveTextAsFile()
{
var textToWrite = document.getElementById('textArea').value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = "ecc.plist";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
downloadLink.click();
}
var button = document.getElementById('save');
button.addEventListener('click', saveTextAsFile);
</script>
</head>
<body>
<textarea id = "textArea">
Notes here...
</textarea>
<button type="button" value="save" id="save"> Save</button>
</body>
</html>
I can not comment, but I want to help you a little.
When you run the code it seems like Event Code
var button = document.getElementById('save');
button.addEventListener('click', saveTextAsFile)
When I run the consle I get this error message:
Uncaught TypeError: Cannot read property 'addEventListener' of null
I am trying to know why its saying addEventListener is null .. You may know how to fix it since now you know what's causing the problem or someone with more experience.
Calling the function with onclick made the trick:
<!DOCTYPE html>
<html>
<head>
<script>
function saveTextAsFile()
{
var textToWrite = tinyMCE.activeEditor.getContent();
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = "note.html";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
downloadLink.click();
};
</script>
</head>
<body>
<textarea id = "textArea" cols="40" rows="40">
</textarea>
<button onclick="saveTextAsFile()">Save Note Content</button>
</body>
</html>