'document.getElementById' only works on index.html - javascript

Ultimate goal is to cycle through photos on a blog page. Seems like 'document.getElementById().src' would be a good approach.
Problem: To make sure the javascript code is successfully linking to the blog page, I tried testing with this in my script.js file:
document.getElementById('testID').innerHTML = "Running test";
and this in my .html file:
<div id="testID"></div>
But, the text "Running Test" does not show up on the blog page. However, when running this same exact test in my index.html page, it does work. Both .html files load the same script file along with jQuery. I don't understand why it works in one html file and not the other.
NEW FINDING:
This line of code now works on the blog page when I remove it from inside
$(document).ready(function(){ ... });
Why would that be?

The Javascript in the current page can only access HTML elements that are in pages that are currently loaded into the browser.
More specifically, document.getElementById() ONLY searches the current web page's document for matching elements. It does not search any other pages and certainly does not search other files on your server that are not loaded into the browser. "current web page" means the HTML loaded from the current URL in the browser bar.
When a web page is no longer visible in the browser window (e.g it's been replaced by some other page), it is gone and no longer reachable by any Javascript. In some specific cases, you can access document loaded into other tabs or other frames (subject to same-origin security rules and requires a different method of access).
In addition, no changes to a web page are persistent in the browser. As soon as a web page is no longer loaded into an active browser window, it is gone and reloading it again will load the original, unmodified version of that document.
If you want the same code from one page to run in another page, then you must include that same code in the other page. You can want, you can share a reference to the code by putting the code into its own page and then using a <script src="xxx.js"> tag in each page to cause the same code to get loaded into each page.

If interpret Question correctly, try using .load()
$("#container").load("/blog/blog_1.html #testID")

Related

Automatically jump to a certain part of a WebView

I'm making a Chrome App, and i'm using the web view tag, which is similar to an iframe.
Is there a way to load halfway down the webpage that's inside the web view?
I have tried:
<webview onLoad="window.scroll(0, 150)" class="test" src="http://example.co.uk/test.aspx"></webview>
But it seems that would be far to easy. I'm not convinced its even possible.
Thanks
Assuming for a moment that code would execute (it won't because of the CSP), window would refer to the app's page, not the embedded page.
You need to execute the code in the context of the embedded page.
If you worked with Chrome extensions before, you would know that the part interacting with web content is called a Content Script.
Apps have a similar concept for <webview> elements. You can either declare in advance which pages should get which content script while they load, or you can explicitly load a content script.
So, suppose you have a file content.js with the following contents (excuse the pun):
window.scroll(0, 150);
Also, assume you have a script app.js running inside your app page, and a variable webview is a reference to the <webview> in there.
Then, you can make the webview execute it:
Declaratively, by calling webview.addContentScripts before loading the page (e.g. before setting src from app.js code):
// Assuming <webview id="wv"></webview>
var webview = document.getElementById("wv");
webview.addContentScripts([{
name: "ExampleRule",
matches: ["http://example.co.uk/*"], // can be as narrow as you wish
js: ["content.js"]
}]);
webview.src = "http://example.co.uk/test.aspx";
Explicitly, when the page is already loaded:
// Assuming <webview id="wv" src="http://example.co.uk/test.aspx"></webview>
var webview = document.getElementById("wv");
webview.executeScript({file: "content.js"});
It is, of course, possible to make content.js much more sophisticated (for example, receive commands from the app) and/or more precisely control the timing of your operation - but those are at this point generic content script questions for which you can find solutions elsewhere or ask a new question.

Unable to access the whole content of the downloaded html file

My original task is to download multiple scientific publications as html file. Currently my script downloads a file in chrome but it takes to the url in firefox. But that is not my questions.
If you will see the downloaded html source, you will find that not all content has got downloaded. Only some of the content shows up in the downloaded html file. That is my problem. Why I am not able to get the whole html document content in the downloaded html file. The file I want to download is this
var links = [
'http://www.sciencedirect.com/science/article/pii/S2078152015000516'
];
I thought probably it is because of CORS issue. But, after implementing CORS script, it was still showing the partially downloaded content in the responseText.
Any assistance will be appreciated.
Also, if someone can tell me why in firefox, the script does not downloads the file and takes me to the url instead.
The reason why you are unable to download the entire page, is because the page only loads half way, and the rest is added dynamically once you scroll down.
Therefore, when you try to download the page, you only receive the initially loaded half without the dynamic part.
since it is done using javascript, this particular website offers you an alternative in case you have javascript disabled and do not want to/cant enable it (like with a reader):
If you view the source of the page, you can locate the following message box at the very beginning of the body:
<div class="ua_btn" role="region" aria-label="screen reader compatability">
<a role="button" rel="nofollow" href="http://www.sciencedirect.com/science/article/pii/S2078152015000516?np=y">
Screen reader users, click here to load entire article
</a>
This page uses JavaScript to progressively load the article content as a user scrolls.
Screen reader users, click the load entire article button to bypass dynamically loaded article content.
</div>
here you are offered a link with a query part "np=y" which overrides the dynamic loading and initializes the whole page right away:
http://www.sciencedirect.com/science/article/pii/S2078152015000516?np=y
use this link in order to download the artice and it will work.
Firefox:
As mentioned in the comments, firefox does not support CORS downloads by design due to potential security risks. more about it can be found Here

How do I parse an HTML Code which is generated via Java Script

My task at hand is to download a file through vba. The problem is, that the page is mostly generated via JavaScript. Sorry that i cannot just share the page with you, because I dont own it, but I will try to make things as clear as possible.
The HTML from the IE source viewer looks similar to this:
<head>
css stuff
jscript link
more jscript links
more css stuff
</head>
<body>
divs and links and so on
<div magic inside that div that shows on browser but not in source code></div>
</body>
I very much believe that the java script generates an iframe and fills it with html code.
Do you think that it is possible to retrieve the finished iframe from the java script? Because I can literally see the HTML code when i use the chrome DOM explorer, but I cannot fetch the HMTL data in vba. It drives me crazy that I dont understand this :D
Thank you for your time
What you have described looks like a typical DHTML that could be generated by JS after XHR request. So open the web page e. g. in Chrome, check the Network tab. After the target content has been generated on the page, you will see all requests on the tab, examine them, usually all the data you need to retrieve are shown there (note that some conversion of the data may be necessary).  If you find it then you may just do a XHR with the same parameters to retrieve result. Or another way, you can retrieve the generated HTML content accessing DOM, if the iframe is same origin, as it was mentioned above.

Get at entire web page contents using Javascript

Is there a way to load the entire contents of a page into a javascript variable? (the page is not properly formatted HTML.) Ie store the page contents as a string in a variable. It only needs to work with Firefox.
I have some javascript running in one firefox tab that accesses the content of a page in another tab (the target window). Normally the content of the target is an HTML page so I can get at its content like this...
targetWindowName.document.getElementsByTagName("html")[0].innerHTML;
However I have come across a page that is not in proper HTML and so the above doesnt work.
(The actual content of this awkward page is JSON. I know this would be best loaded up with AJAX or something but I have a framework already setup to process HTML pages and it would be very handy if I can treat this particular (one off) page just like a regular HTML page.)
Thanks
Guess you can use:
win.document.documentElement.innerHTML
Read the file into a variable. Like you would any text file.
So, Page "A" has code that goes out and gets the HTML page contents and loads it into a variable.

Javascript ajax scripts in <head>?

I have 2 html page (main and details): the main page consists of a table and a empty div. When the user clicks one a table row, the empty div is filled via AJAX from another page (details page).
On the details page I want to load a Google Map. Also I would like the page to be operational by itself (standalone), not just via AJAX.
So here is my problem:
To use Google maps I have to include this script in head of html:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
If I include this in the details page, it works fine standalone. But it doesn't work when I try to get it via AJAX from main page. Google server hangs, and doesn't progress.
On the other hand, if I include it in the main page, AJAX works fine, but the details page is not operational on its own, since its missing a vital include.
I'd really like to leave it in the details page, since it has much more logic to be there. Is there any way I can load the script in the main page, from the details page?
Generally what is the best approach with javascript including and AJAX? Keep everything in main page? Or is there any mechanism to load everything into main page, but keep the code in ajaxed pages?
Btw. I'm using jQuery, but it is not really important. This is a design issues, not a library problem.
Since you are not using IFRAME, it is best that you include the JAVASCRIPT in the main page rather than detail page - since you can do and the js will work. This I think will fix the ajax issue for you and the script is loaded once.

Categories

Resources