URL Hash modification after document.write() - javascript

I download via jQuery AJAX a whole html webpage. I want to replace the content of the current page with the one downloaded via ajax. I do it with document.write(). It doesn't work correctly because whenever I try to modify the hash, the webpage is reloaded.
I know in IE it it necessary an iframe, but that is not the problem, because I use jQuery History plugin. The problem is due to the use of document.write(), but I don't know why.
Update:
index.php -> main entry point, which downloads JS code to parse URL after hash and invoke request.php.
request.php -> request entry point. It returns the webpage.
It works OK when I simulate a direct request to request.php and the downloaded webpage updates the hash.
It doesn't work (in FFox only) when I simulate a original request to index.php, which downloads the webpage via request.php and the downloaded page modifies the hash.
I use document.write() to write the content of the webpage to the current window. So the problem is about the modification of the hash in a document "being written".

don't use document.write().
instead use $('your selector').html(your_html_fetched_via_ajax);

I thinkg that you can't modify the whole html object because it means erasing the reference to the javascript script tag. I would say your best bet is to either just link to the request.php page or just change the body tag
$('body').html(response_html);
And I agree with harshath.jr, don't use document.write().

The individuals pointing you towards an iframe are correct. Add the iframe, and simply set the src attribute to the page you're fetching...you won't even need request.php.
If you really want to try to load in the html without an iframe, you'd have the parse out the elements in the head and add them to your documents , and also parse the contents of the and add them to the current pages body. Its not guaranteed to display correctly, though. I think an iframe is really what you're looking for.

Related

Replace all src/href references to include a site root directory in jquery

Suppose i have loaded some html data from ajax.
The ajax returned an an html form.
The issue arises when loading the resources in the loaded data. Let me elaborate..
For example, the ajax may receive a script tag referenced to "/script.js". But since my page would be on (let's say) a separate domain the browser wouldn't recognize the url "/script.js". So what I'm looking to do is replace all of the links like "/abc.xy" to be linking to the domain form which i'd be loading the resource originally..
So, all references like "/abc.xy" would be changed to "www.domain.com/abc.xy"
How would i achieve this? (if it is even possible)
function resolve(old,new){
[...document.getElementsByClassName("*")].forEach(el=>{
if(el.src){
el.src=el.src.replace(old,new);
}
if(el.href){
el.href=el.href.replace(old,new);
}
});
}
Use like this:
resolve("http://original.com/","http://new.com/");

How to get Dynamic HTML code by PHP or JS

I want to get contents from a website, but when I use file_get_contents() function, I get the HTML code, but some of them lost, I check the site code, I know some parts generate by Ajax, I don't know how to get them, does someone have any suggestions?
I may get some examples,
Site: http://www.drbattery.com/category/notebook+battery/acer/aspire+series.aspx?p=3
Request: I want to get those laptop model which list on this page, such as "Aspire 1690" etc. I need all of those models.
Mhm.
In JS you can access the HTML content in a browser by
document.getElementsByTagName('body')[0].innerHTML
Doing this server-side, you would probably need a headless browser for this.
The tricky part would be detecting, when the content has finished loading and everything is in place. (You wont be able to track AJAX requests by "window.onload".)
Doing it manually, you could add a bookmarklet to your browser, like
javascript:alert(document.getElementsByTagName('body')[0].innerHTML)
You could then select the alert's content by keyboard shortcut (CTRL + A or Command + A), copy it, and hit return (as the dialog's close-button will probably be out of sight).

Reload page without <script> tags

I need to render a page without executing it's JavaScript (however inject my own script), showing the user how the page would look from a bot's POV.
So far I have thought of loading the page using ajax, removing all <script></script> tags from the loaded data, injecting my own <script></script> tags and replacing page html with the filtered data.
Are there any better ways of achieving this?
Maybe not a better way, but an alternative to using javascript to do what you want:
You can write a (php) server-side script, use file_get_contents() to get the original page contents, use php to remove and replace javascript page contents (str_replace, substr_replace, preg_match) then call this php script in an iframe.
See my related answer for more detail: https://stackoverflow.com/a/17262334/888177
<meta http-equiv="refresh" content="5; url=http://example.com/">
Meta refresh.
EDIT:
So, here's something you can do:
Check out this jquery plugin called fancybox.
What it does is, load remote url content into a neat popup div on the page. You can check if you can modify it's code to make it work how you want.
Also quick headsup: bots don't have cookies as well. So, stripping just script tags won't do. Also have to disable cookies in the request.

Geting contents of javascript loaded in browser

How do I get the contents of a loaded script at runtime without using ajax to read the script from the source?
if the source of the script is written inside the script tag, like so:
<script>
source comes here
</script>
then you can use the innerHTML attribute to retrieve it, but if the script is loaded with the "src" attribute then I think that you can not use the dom to get the content.
i believe that your only option is to use the src attribute, and then issue an ajax request to get the source.
check this: How can I get the content of the file specified as the 'src' of a <script> tag?
I think if you actually want the text of the loaded script you need to request it with ajax rather than a script tag. That way you can inspect the response as text and eval it if you need to. If using jQuery you can use jQuery.getScript.
I'm still not entirely sure why you need to access the source, it would be cleaner to form the script you are loading as an object with fields you can query from the second script, rather than reading the source.

Follow a URL using JavaScript

Is there any way to follow a URL in JavaScript without setting the document.location.href?
I have a page that displays a list of objects and each object may have a file download associated with it, which is accessed via a hyperlink. Clicking the link initiates an AJAX request that ultimately leads to a transient file being generated that can be referenced by a unique and temporary URL.
At the moment when the AJAX call completes, it simply sets the document.location.href to the temporary URL and the file download is initiated. Of course this has the side effect of changing the URL in the browser's address bar, so if the page is refreshed the file is downloaded again rather than the object listing page itself getting refreshed. I guess I could set the URL back to what it was before, but that feels a bit hacky.
Incidentally, I'm using the Prototype JavaScript framework.
you could open a new window with the new url? or try setting an iframe's url to the new url, both should present a file download (the latter being the better option)
You could use a hidden iframe - set the src of that to the file to download.
If you're doing all this just to trigger a file download, it sounds like a good application for using a hidden Iframe. Set the SRC of the Iframe instead, so you don't have to mess with the main page.

Categories