Is there a way to get the DOM elements from another HTML file rather than the elements from the HTML file that calls the JS file?
My idea is to make html templates, and render them in a main html file, depending on certain conditions imposed by the JS file.
Something like
var initScreen = new document(URL);
document.getElementById("body") = initScreen.getElementById("body");
supposing that this is the correct way.
Yep. You can fetch a remote (or local) file and then use createHTMLDocument:
document.querySelector(".the_replacer").addEventListener("click", () => {
fetch("https://cdn.rawgit.com/ryanpcmcquen/c22afdb4e6987463efebcd495a105d6d/raw/476e97277632e89a03001cb048c6cacdb727028e/other_file.html")
.then((response) => response.text())
.then((text) => {
const otherDoc = document.implementation.createHTMLDocument("Foo").documentElement;
otherDoc.innerHTML = text;
document.querySelector(".element_on_main_page").textContent = otherDoc.querySelector(".awesome_external_element").textContent;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="element_on_main_page">Replace me, please.</div>
<button class="the_replacer">Replace them.</button>
<script src="index.js"></script>
</body>
</html>
https://repl.it/#ryanpcmcquen/TurboTremendousProgramminglanguages
Here's the remote file's contents:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="awesome_external_element">Foobar.</div>
</body>
</html>
Browser support is not too bad. On the other hand fetch is pretty modern, so if you are going for legacy support you should use XMLHttpRequest.
Related
I am taking an input value from one page and on clicking a button I want to display it on another page in HTML.
I have exported my onclick function from one ts file and imported it in another.
Here's my TypeScript code for exporting:
var txt: HTMLInputElement=<HTMLInputElement>document.getElementById("text");
var dis=document.getElementById("dis")
export function send(){
return txt.value
}
here's the HTML for the same:
<!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>
<link rel="stylesheet" href="menu bar.css">
<script src="cart.js" defer></script>
</head>
<body>
<input type="text" name="Number" id="text">
<button onclick="send();"></button>
<p id="dis"></p>
</body>
</html>
The importing page HTML is this:
<!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">
<script src="import.js" defer></script>
<title>Document</title>
</head>
<body>
<p id="display"></p>
</body>
</html>
And here's the TypeScript for it:
import { send } from "./main/cart";
var p =document.getElementById("display")
p.innerHTML+=send()
But I am getting Uncaught ReferenceError: exports is not defined
Most browser support commonjs modules. So you need to compile using babel if you code like that.
Here you can either use babel or write below codes.
module.exports = function send(){ //codes };
And import as....
let send = require("./main/cart");
Other code remains the same.
I need to log on site, and parse info.
I am trying to do this: powershell invoke-webrequest to log into website
But I can not find the form...
If I use function view page source in the browser I see only:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#ffffff"><link rel="icon" href="/frontend/favicon.ico">
<link href="/frontend/css/99.ad9d8c.css" rel="stylesheet"><link href="/frontend/css/style.aa5ad6.css" rel="stylesheet">
</head>
<body>
<div id="content"></div>
<script src="/frontend/js/modules/vendors~index.ad9d8c.chunk.js"></script>
<script src="/frontend/js/index.275be7.bundle.js"></script>
</body>
</html>
Update
I am try next, but this not work for me.
$ieObject = New-Object -ComObject 'InternetExplorer.Application'
$ieObject.Navigate('http://XXX.XXX.XXX.XXX:8090/frontend/login')
$currentDocument = $ieObject.Document
$currentDocument.IHTMLDocument3_getElementsByTagName("input") | Select-Object Type,Name
Error
You cannot call a method on a null-valued expression.
I have created a Dart HttpServer which shows "HTML" code on the browser but I also want to connect "CSS" & "JS" to this HTML,
How should I do that? please help
HttpServer _server;
_server = await HttpServer.bind(InternetAddress.anyIPv4, port);
_server.listen((request) async {
request.response
..headers.contentType = ContentType.html
//HTML Code
..write('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<! -- <link rel="stylesheet" href="styles.css"> -->
<title>Hello World</title>
</head>
<body>
<p>Hello WOrld</p>
</body>
<! -- <script src="app.js"></script> -->
</html>
''');
await request.response.close();
}
PS 1: One Solution is to add CSS and JS codes in the HTML code which would work but is less efficient.
PS 2: I am using this dart code in a flutter project.
Just use html tag.
Don't neglect every source imported by html tag is a http request. you should handle these requests. Dart HttpServer doesn't handle these.
Is there a way to fetch sequence (with vanilla JS) from NCBI database link?
https://www.ncbi.nlm.nih.gov/protein/KTC77672.1?report=fasta&log$=seqview&format=text
I done this with other database (uniprot) and it worked. But NCBI might have some differences.
async function getData(url) {
const data = await fetch(url);
return data.text();
}
const test = getData('https://www.uniprot.org/uniprot/E5G0U9.fasta').then((r) => console.warn(r));
test.html:
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title>test</title>
</head>
<body>
test
</body>
<script src="test.js"></script>
The link in your question does not return FASTA format as plain text. It returns HTML using the pre tag to make it look like plain text.
You should be using the NCBI E-utilities API - in particular, the efetch method.
The URI for your example protein looks like this:
https://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=protein&id=KTC77672.1&rettype=fasta
So try that in your Javascript function. Seems to work in my Chrome console (see image).
so I'm trying to setup PapaParser to parse a CSV file onto arrays that I can later use with another script to make graphs. So far I just want to paste the strings from my arrays onto the blank div, so I can see what's going on. I am new to this and have no idea how to import javascript libraries, so I copied the files into my public_html folder. Now NetBeans seems to see them.
Long story short I'm stuck at the beginning, I get a reference of ReferenceError: Papa is not defined when I try to run my parser.
Any input or a link to a tutorial on how to do this would be greatly appreciated (tried googling, found nothing of use). I've added my code so far...
Papa.parse("TopPercentilesCSV.csv", {
complete: function(results) {
console.log("Finished:", results.data);
}
});
.displaypanel {
border: 1px solid black;
width:400px;
height:400px;
margin:auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Parsing CSV test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css"/>
<script type="text/javascript" src="index.js"></script>
<script src="PapaParse/papaparse.js"></script>
</head>
<body>
<div class="displaypanel">
</div>
</body>
</html>
Change your code to this:
<!DOCTYPE html>
<html>
<head>
<title>Parsing CSV test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css"/>
<script src="PapaParse/papaparse.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="displaypanel">
</div>
</body>
</html>
First you have to include the library, then you can call function defined inside