I am needing to open an html page on server-A and grab some values from server-B's webpage. In other words I want to display server-B's webpage values on server-A's webpage.
The webpage (server-B) data I need the values from is being populated by a source that I do not have access. The values are written into what appears to be a variable that looks like this: [[0]]. When the page is accessed that value [[0]] is populated with current data.
I have unsuccessfully tried to attach a label to the [[0]] to allow reading from server-A with a form post and get methods.
What should my approach be to move this data in [[0]] to server-A webpage?
Server-B page:
<html>
<!-- Head information for the page including page title -->
<head>
<title>Test</title>
</head>
<body color=#FFFFFF>
<!-- Start of your page body -->
<!-- This code displays the current tag value for index 0
[[0]] will be replaced by the tag value a the time the page is loaded -->
The value of the tag with index 0 is [[0]]
<!-- Added code to store [[0]] in div -->
<div class="pink-box" id="thatDiv">[[0]]</div>
</body>
</html>
I added this html/javascript for Server-A and I am getting the an error described with COR:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Div</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Div:</b>
<ol id="Result"></ol>
<script>
$("#Result").load("http://192.168.1.168/user/default.html #thatDiv");
</script>
</body>
</html>
You can get the contents of the HTML file and find the starting "[[" and the ending "]]" and grab the data in between.
<?php
$serverBFile = "http://www.serverB.com/file.html";
$serverBHTML = file_get_contents($serverBFile);
$serverBStart = stripos($serverBHTML,"[[");
$serverBEnd = stripos($serverBHTML,"]]");
$serverBLength = $serverBEnd - $serverBStart;
$serverBValue = substr($serverBHTML, $serverBStart, $serverBLength);
?>
The way that I have done this in the past is using DOM parsing tools like jQuery.
If you have access to a node.js server, you can use the jQuery plugin to load up server-B's webpage and then query something that's constant with the desired tag, be it ID, classname, tagname, location, etc.
<html>
<!-- Head information for the page including page title -->
<head>
<title>Test</title>
</head>
<body color=#FFFFFF>
<!-- Start of your page body -->
<!-- This code displays the current tag value for index 0
[[0]] will be replaced by the tag value a the time the page is loaded
let's say [[0]] becomes a <div>-->
<div class="pink-box" id="thatDiv">data I want</div>
</body>
</html>
From here, it's fairly easy to extract the text via $('#thatDiv').text() or $('.pink-box').text().
This is a fairly simple solution. Once you get that value into a variable in your node server, just expose a REST call that your server-a webpage can make an AJAX request to.
The reason I say to use node is because it seems that this page has dynamic content that must be loaded with JavaScript. If I knew more about how this page interacted, I would be able to give more specific solutions to your problem,
Related
My program is to store the number of entries through the entry button and save it through the save button...
So, I added a JS link in my HTML body tag and then ran it through the live server or tried to store it, it shows "live reload is not possible without body or head tag"...
Then add a body and head tag!
<head>
<!-- head stuff -->
<script src="whatever"></script>
<meta something>
</head>
<body>
<!-- Main body stuff -->
<div id="mydiv"></div>
</body>
I was working with the following tutorial of D3.js: https://www.tutorialspoint.com/d3js/index.htm.
My issue is as follows:
I'm aware of that the location inside the HTML is at the end of the . I mean, I usually put it here:
<body>
<!-- HTML code -->
<script>
<!-- JS code or external JS link -->
</script>
</body>
With this practice, what I'm looking is to run JS after the HTML content renders.
But! When I follow this practice using D3.js, what I discover is that D3.js renders what I add (using d3("html").append(something to append), after the script tags.
For example!
<!DOCTYPE html>
<head>
<title>D3.js Test</title>
</head>
<body>
<div class="div_test">
<h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<script>
d3.select("html").append("p").text("I get this text after the script tags");
</script>
</body>
</html>
I'm getting the content as follows:
<!DOCTYPE html>
<html>
<head>
<title>D3.js Test</title>
</head>
<body>
<div class="div_test">
<h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script>
d3.select("html").append("p").text("I get this text after the script tags");
</script>`
</body><p>I get this text after the script tags</p></html>
Questions!
Is the position of the tag correct?
Is there a possibility to keep the flow without adding a to anchor the expected new tag?
Thanks!!!
You can use selection.insert() to insert an element instead of appending it to the DOM. The second argument to that method determines where the newly created element is put into the DOM tree. If you just want to put it in front of the first <script> element you can do something like:
d3.select("body").insert("p", "script") // <-- insert before first <script>
If you need to place it after the <div>, no matter what the next element might look like, you can use the adjacent sibling combinator to select the sibling element directly following the <div> like so:
d3.select("body").insert("p", "div + *") // <-- insert before next element following div
In the below Code,I have added the script tag before the end of the body tag.So from my understanding,I should get html content first,in this case the header tag and three paragraph tags.After that,I should get the alert box.But I am getting the opposite.Alert box is being displayed first before the html content.I am not able to understand why.Please help me on this.Thanks in advance :)
<html>
<head>
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<p>new ---> Add A Todo</p>
<p>list ---> List All Todos</p>
<p>quit ----> Quit App</p>
<script type="text/javascript">alert('h')</script>
</body>
</html>
HTML page loads as it follows unless you use any define any importance. Here you are right but the situation is HTML shows for micro sec or even less which we can't see. Then the alert box shows up. For this reason, it seems different from the theory but you can call as an illusion.
How to get the full source code (including comments) with JavaScript but without traversing the DOM tree of the following page?
I am looking for something like document.innerHTML because document.documentElement.outerHTML does not include the surrounding comments.
<!-- begin: desktop.html.tpl -->
<!DOCTYPE html>
<html>
<head>
<title>FooBar</title>
</head>
<body>
<p>This is FooBar</p>
</body>
</html>
<!-- end: desktop.html.tpl -->
<!-- generation time: 32.446ms -->
The expected result should be exactly this source.
you need to use
$("html").html()
In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned.Detail
or
document.documentElement.outerHTML
Demo
I am working on a page that will display the contents of a database field. The contents are in HTML format and includes an entire webpage
<html>
<title>Some title</title>
<style type="text/css">
/* CSS content here */
</style>
<body>
<!-- body content here -->
</body>
</html>
I need to display all of this inside another webpage so I thought using an iframe would allow me to negate any css from the parent page. However, I cannot figure out how to overwrite the contents of the iframe document.
What I've done so far is retrieve the data and then use the following
$("#iframe_constainer")
.find('iframe:first').contents().find('html:first').html(myHTML);
My web page includes a div called iframe_container which contains an iframe.
<div id="iframe_container"><iframe/></div>
This is working okay, but the contents of myHTML are getting wrapped inside html tags. So the effect is like this
<html>
<html>
<title>Some title</title>
<style type="text/css">
/* CSS content here */
</style>
<body>
<!-- body content here -->
</body>
</html>
</html>
I know it's because I'm finding the html tag in the iframe and changing the HTML. Is there a way to overwrite the entire document using jQuery?
Opening the document and closing afterwards will fix the issue with appending the content
var iframe = document.getElementById('iframeID');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(htmlData);
iframe.contentWindow.document.close();
You don't really need jQuery for this, just use document.write to write content to the iframe to completely replace iframe's document.
E.g. (in plain vanilla JS)
document.getElementById("myIframeId").contentWindow.document.write(myHTML);