I am trying to find a way to save all html content from a webpage to a variable. This should work even if the webpage has frames in it. By current best solution is:
javascript: alert(document.body.outerHTML);
Just paste the code into the control in your browser where the url is placed and push enter to see the result. Any idea how to do this?
You should cycle over all the frames and ajax-load the content.
Somethings like
document.getElementsByTagName('frame')[0].src
to get the source. But I strongly suggest you to use library to help you out. In jquery can be quite simple task. Cycle over all frames, than $.ajax request all the externals source and build it (replacing the relative section)
But, as pointed by smeg4brains, innerHTML can be your way.
Here is the direct answer to "how to do this":
Having this in the address bar just press Enter and you'll see the contents in alert dialog.
To see contents of frames you'll have to iterate them separately it won't be part of the HTML.
Does this work?
var copyOfHtml = document.documentElement.outerHTML
alert(copyOfHtml)
Related
I've been looking everywhere and I can't seem to find exactly what I'm looking for, I'm starting to think I should be looking at some kind of Javascript?
Basically, I have an amount £1,000,000 displayed over an image button and I need this repeated on a different page (The page the button leads to).
As I've never done this before I'm not sure where to look or what I need to be looking at as I'm a novice in this area.
Any help would be appreciated.
If the value is static so you can use content css property :
https://developer.mozilla.org/fr/docs/Web/CSS/content
If the amount is dynamic you should pass variable through Url or via form.
As I don't have a clue as to what you're setup is, i'll make some assumptions:
a static HTML site
no javascript frameworks (so no jQuery or jqLite etc)
with these assumptions you should start by looking up url attributes as a way to communicate basic information between pages.
As an example, the button href should look something like this:
/link-to-page?amount=1000000
then you grab the amount on the new page - with javascript - looking in the window.location object
This is a good resource
I'm currently working on a web editor where you can enter your HTML, CSS and JavaScript code and see the result in real time. Something similar to JSBin or JSFiddle. (I'm doing that to get an offline editor)
I've already been through many problems especially when it comes to CSS but I solved them by using an iframe and injecting all my code into it. And that works amazingly well until you type some JavaScript.
I'm sending the code between <script></script> but unlike CSS it won't run. What's very weird is that when I enter something like $('button').css('color', 'red');, the buttons of the editor effectively get affected but not those of my iframe. Exactly the opposite of what I expected. I've tried many things, looked at many topics on the forum, but nothing works. I also tried to load a blank page in my iframe. In that case, JavaScript runs but it becomes impossible to edit the code in the iframe! What's going on? Where am I going wrong? Thank you in advance for your help!
Here's my editor : https://jsbin.com/tuqite/edit?html,js,output/
Try updating the content of the iframe like this.
// this string contains both html and script
var html_string= "content";
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string);
By directly updating the iframe DOM like the way you are doing may not be the right way .
What I Want: Very simply I have a C program that generates a variable periodically, I want to be able to display this value on a website.
Restrictions: The webpage is HTML, php does not work, javascript does [I have tried a few javascript solutions but they have all been long, tedious and in the end ineffective] I want it to be able to format the text so that it matches the rest of the webpage. Above all I'd really like to find something simple that works.
Freedoms: I can output the variable from my C program to just about any file type and content that I want, the file is hosted so is available locally to the server or online for the client.
Preferred Solutions: I am currently playing around with the object and iframe tags native to html. They give a nice simple input:
<object height=20 width=75 type='text/plain' border=0 data="URL/filename.txt"></object>
inserts the contents of my file, but it can't be formatted so I am stuck with 12pt Courier font which is not acceptable. Using
<iframe seamless height=20 width=75 scrolling='no' src="URL/filename.htm"></iframe>
and adding my desired font/colour/size etc to the htm file gets me the right text style, but htm has a large amount of white padding around it which I can't seem to get rid of so I have to make my iframe quite large for the text to be displayed, but then it doesn't fit smoothly with other text.
So anyone that can answer one of four questions:
How to remove excess padding from htm
How to format the style of a html object
Is there anything in Java as simple as the php [so apparently it doesn't show php code even when you quote it as code. But basically using echo and get_file_contents to insert the contents of a txt file into a html page]
Propose an alternate solution
Padding and style can be handled by css.
By java I assume you mean javascript - google-ing will help you. Without details of what your server is running and what is dispatching your pages we can't give you an exact answer. You might want something with ajax to keep it updating in the background.
Try googling your question, you'd be surprised how often this helps.
I'm not sure what you're trying to do once you get the variable into your web page, but I think something like the following could be useful.
Create a hidden div on your page
Have your C application write the variable to some file
Use jquery to execute an ajax call to pull that value into the div ( or whatever other container you want to use
using some type of timer, execute the ajax call every X period of time, which will then get your up to date variable
on your main page, have another timer that will then come in to that container, grab your value and then you are free to do what you want with it.
This is all off the top of my head without knowing much about what you're trying to accomplish. If you provide some further details we may be able to help you a little more.
You need AJAX... that's just a fancy buzz-word. It means you can tell JavaScript can get a file from the server without reloading the page and you can insert data from that file into your HTML.
AJAX is made much simpler by using a JavaScript library like jQuery, but it can be done without jQuery. There's a pretty decent Getting Started tutorial at Mozilla Developer Network if you want to do it the hard way, but I really recommend jQuery.
As far as formatting... any formatting... you need to use CSS. Just about everything about the appearance of anything on a web page is controlled by CSS. MDN has a Learn CSS section, too.
load jquery on you main html file
put a div with some id (example id="newvalue")
make you c program to write the output in a file (for example value.html)
on main html page header, after jquery include code add some javascript like
$( document ).ready(function() {
$("#newvalue").load('yoursiteurl/value.html');
});
I read that the following should work in order to access the contents of an iframe with javascript:
document.getElementById("iframe_name").contentDocument
or
document.getElementyById("iframe_name").contentWindow.document
However, neither of those methods work for me. The iframe I am trying to access is a Google form that I created. It is a registration form that I created for my website. I want to do some calculation on some of the fields that the user types in then display it after the iframe. Accessing those fields using javascript is the best way I could think of. Why can't I access it? Is there maybe a better way to achieve my goal? Thank you.
You can't acces external page like google.com from your server.
What you have is correct. Here is a more complete sequence that should work cross-browser:
var ifr=document.getElementById("iframe_name");
var doc=ifr.contentWindow||ifr.contentDocument;
if (doc.document) doc=doc.document;
Update: as said in another answer, this won't work across domains (for example if you try to access google.com from mydomain.com).
I don't know what you wishing to do but maybe this will help you..
I used this to reload the frame
document.getElementById('graphFrame').contentDocument.location.reload(true);
you can see that the location attribute is related to the iframe.
Next, I am changing a div inside an Iframe like this.
top.frames["graphFrame"].document.getElementById('right_example');
So the top.frames is array of the page frames. then i am searching for a dom element which his ID is "right_example" then you can do what ever you want with that.
I'm a member in a website and there's a huge (automatically generated) HTML table on this PHP page that is only available to me and I wanted the table source code because I want to copy it to a HTML page on my computer to then process it with a program.
The problem is that when I right-click to display the page source code it works. However, I'm tired of looking at the source code and inside all the linked JavaScript files. I can't seem to find the table or any data of it on the scripts/page source codes.
I can select the table data and copy it, but it is just the data. It doesn't say anything about flash, so I'm assuming it's not flash. The data of the scripts/pages isn't obfuscated, it's easily human-readable.
I used Google Chrome's 'inspect element' and it worked.
I was thinking on doing a PHP script that would import data from a similar table, but I will have to know more about a lot of stuff mentioned here.
What can I be doing wrong or what can cause this kind of behavior?
Two possible reasons could be that the table may be returned from an AJAX call to another page that returns the HTML for the table, or they could be generating the table's html code and contents on the fly from a list of values coming from javascript or some other source rather than serving the HTML output to you from the server side.
Something you can do to figure it out is see if there are any empty div or other html elements where the table appears to be inserted, and search their javascript files for references to those elements. That may shed some light on how they populate it.
Feel free to update your question with the raw html (where you don't see the table) and maybe some javascript and we can look. Use pastebin if it is a lot of content.
Would it help to use the Firefox plugin called Firebug?
Using this plugin you can click on an area of a page to see the code displayed in the Firebug section at the bottom of your window.
Here are the details: https://getfirebug.com/whatisfirebug
Maybe the table is generated with a JS script, if that's the case, doing right click and "View source" would not show you the html. You need to use something like Chrome's devtools. Open google chrome and visit that page, once there, right click the table and select "Inspect element", the devtools will open and then you'll see the table's code, right click it's opening tag and select "Copy as html".
Let me know if that works :)
Try a developer extension like http://getfirebug.com/ The underlying source code may not reflect output due to how much the DOM can be modified by javascript with extensive use of ajax. This plugin will permit you to view elements as they're interacting with the browser.
its probably that the table is dynamically generated on the fly so looking at the source code won't actually give you much. try looking at the "GENERATED" source code or inspecting the DOM using Firebug, or the Developer tools of chrome/safari.
Or better yet, try your hand at web scraping:
http://vancouverdata.blogspot.com/2011/02/how-to-web-scraping-xpath-html-google.html
Although I'm not sure if it'll work for pages that need a login. But hey, at least you learned something new :p