Given a completed page a.html, is it possible to build b.html which includes JavaScript such that b pulls data from a.html and outputs the data into b.html's window? That is, is there any such thing like src=whatever.js where one can declare a variable of the other HTML page, so that something like this line like this would work (obviously doesn't as it is)?
<html>
<head>
<title>b.html</title>
</head>
<body>
<script>
var images = a.document.body.getElementsByTagName ("img");
etc.
Thanks again for any help! I see the 'may have your answer' above, but that uses JQuery, which I'm not looking for.
The simple answer is 'no, javascript is explicitly forbidden from accessing local filesystem, so there's no way a.html can read the contents of b.html even if they reside in the same folder locally'.
That being said, however, if the are both being served by a web server, you could always ask it to fetch a.html for you and then use javascript to parse it, invisbile to the user, and extract the info you need from it.
Take a look at a rather clumsy example below, using invisible iframe HTML element - basically a container you can put on page and load a different page into, and then have access to its DOM tree. (There are limitations to prevent XSS attacks, but since both a.html and b.html are from one and the same domain, these do not apply in your case.)
a.html
<!doctype html>
<html>
<head>
......
</head>
<body>
...
<div id=aa>
Some interesting stuff...
</div>
...
</body>
</html>
b.html
<!doctype html>
<html>
<head>
......
</head>
<body>
...
<iframe src="a.html" onLoad="alert('The contents of div with id=aa from a.html is: ['+this.contentDocument.getElementById('aa').innerHTML+']');"></iframe>
...
</body>
</html>
Here, it loads the entire document a.html into element on page b.html (which you can make invisible through, say CSS) and, once it's loaded, it extracts the necessary div from the DOM tree of page a.html (which is accessible now through the iframe object in DOM of the current, b.html page) and makes use of its innerHTML property to prove that it can access it.
Here, the contentDocument property of the iframe object on page b.html points to the normal 'document' object of the page we have loaded into the iframe, giving us all the options we have when dealing with any page when we have its document root.
This example is clumsy by many counts of course, not least being the fact that you load TWO pages (b.html and a.html) into the browser (albeit a.html is invisible) instead of one and that is hardly efficient.
But it's a start and for realy simple scenarios it might be an adequate if unsophisticated solution )
Related
I want to redirect to another page from 1 page without showing contents of that page using javascript/jquery.
So for example I would be either typing or coming from a search engine to a page on my website say www.mysite.com/aaa/ and I should get redirected to www.mysite.com/bbb/ without showing the contents of www.mysite.com/aaa/.
The server side is asp.net and I can do this using Response.Redirect but I do not want a code change.
From my limited knowledge, I cannot use document.ready or window.load as both will load the contents of the page in the browser before redirecting.
I am not aware of any other thing which would help me achieve this. Tried hard searching but could not get anything useful.
I got something here. I can have this in the header but right at the top of the header might not be possible. Plus the answer is not looking very convincing. However, can try it out and update this question with the findings.
Please help!
Thanks in advance!
When the the web browser engine reads an HTML document and identifies a script element, it immediately invokes the JavaScript interpretator and executes the code. So, if your document starts with a JavaScript which redirects away from the page, the client shouldn't be shown the remaining document. Something like this could work:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
//using "replace" removes the current page from browser history
location.replace('page_b.html');
</script>
Also, if there is something on the current page that should not be displayed to the client while the redirect is in process - you can inject some additional CSS, like
<style type='text/css'>
body {display:none}
</style>
I am working on a web app that can display data in two drastically different formats. To do this, I am using a master page with two different content pages for the differing views. I am using .svc files to do AJAX style server requests. I would like to be able to do a service call from the master pages javascript, then run the appropriate onSuccess javascript method (which would ideally lie in another .js file) to display the data based on which content page I am in. I am guessing this would be done with some kind of function delegate, but I am new to web development and not sure how to do this. Any help would be greatly appreciated.
If you can do everything on one page, your HTML will probably look something like this:
<!DOCTYPE html>
<html>
<head>
<script src="masterScript.js"></script>
<script src="module/childScript.js"></script>
<script>
console.log(globalVariableFromMasterScript)
doSomethingFromChildScript(globalVariableFromMasterScript)
</script>
</head>
<body>
<p>This is the html page</p>
</body>
</html>
This was a stupid question... Just attach different js files to the content pages. Give the functions the same name and it works fine.
I want to know HTML parser's parsing sequence.
Given two html files:
page1.html
<html>
<body>
<iframe id="x" src="page2.html"></iframe>
<div id="z"></div>
<--! something that need to be parsed -->
</body>
</html>
page2.html
<html>
<body>
<div id="y">
<body>
</html>
I know iframe tag downloads src in parallel (i.e., HTML parser parses subsequent lines of iframe tag although iframe src (in the example, page2.html) is not yet downloaded).
So, the question is, when the page2.html is parsed?
In other words, when the div element (id=y) is added to DOM tree?
Is it done after parsing codes in page1.html or done immediately after complete downloading of page2.html by blockinig page1.html parsing? Or, do HTML parser parses page1.html and page2.html in parallel (at the same time)?
Any comments and links would be appreciated.
Thanks!
(If there are wrong questions, please let me know. Actually, I am new to JavaScript and HTML)
Exact timing depends on the browser. page1 should be downloaded and ready first, before page2 is ready. However, page1 is not ready prior to the start of downloading and parsing page2.
The actual order things are done in is browser dependent, but in a typical browser, it first builds a tree of the HTML in the page you are visiting and then processes it. When it gets to processing the iframe, it will then go and request that page.
Now, this is complicated by the fact that the HTML is downloaded in chunks from the server, so from the partial tree, it might start downloading the content from the iframe before it's even seen half of page 1.
The take-away though is that you shouldn't be relying on this behaviour.
If I have this page a.html that has all the jquery codes. And there is another page b.html that has only html tags. Is it possible to do something like:
alert( $('a').fromhref('b.html').html() );
Basically I want to select a tag from another page. I want to basically avoid the use of iframes and httprequests.
You can access parts of another page with jQuery, provided both pages are on the same domain, using load(), but this can only be done with an http request (though if the page is cached, it might not be necessary), as a brief example:
$('#idOfElementOnPageA').load('http://example.com/pageB.html #idOFElementOnPageB');
This will load the html of the element with an id of idOfElementOnPageB into the element with the id of idOfElementOnPageA.
But please note, this in no way avoids making a call to the server, though it does allow you to retrieve elements from another page without using iframe elements in your page.
References:
load().
The filename should be script.js instead of a.html, then, use the script tag.
Basically, something like this (in b.html):
<script src="script.js"></script>
As long as script.js is in the same folder as b.html.
I have an IFrame inside my 1st page that loads another page which I don't want it to be accessed directly. So I thought maybe I can be sure that the 2nd page is loaded inside 1st one if I check the top.location in 2nd page and do as normal if it's equal 1st page URL or remember user as hacker if it's not.
Here is the code:
1st Page:
<html>
<head>
<title>1st Page</title>
</head>
<iframe src="2nd Page" name="frame1" height="80%" width="100%"></iframe>
</html>
2nd Page:
<script type="text/javascript">
if(top.location == "1st Page URL") {
// It's OK, Access is not direct
} else {
// It's not a normal access
}
</script>
It seems that this code will work fine, but I'm not sure if it's foolproof or not. Maybe top.location could be spoofed (like $_SERVER['HTTP_REFERER']) or it's totally unreliable somehow. I need to be sure about that.
Well, you can use JSPs. Have your second page, the one that should never be accessed directy placed in the WEB-INF folder of your project, and then have the main page do a jsp:forward towards that resource. This way the 2nd page can never be accessed directly.
top.location, HTTP referer and everything can be spoofed easily. There is no point of trying to build client-side security checks.
Instead, you should focusing make your code robust using sessions, etc.