How to get full html sourcecode after page dynamically loaded - javascript

I need to save my .php file as an .html for backup with using PHP whenever page called (I am going to use ob_start() for it). But the page content is not static. I am using AJAX to load the content.
That's why view-source: does not show the dynamic data, only chrome inspector show them. But I need to save the page with all elements after page loads. Is it possible or not?
BTW after page loads, there is no any other ajax call (on click or something). Page loads all content on init.
Thanks in advance.

Related

JS how to replace elements before load the page (awesomium c#)

I'm using Awesomium on c# to load html page. Once Awesomium loads, then I execute the javascript to remove any other elements except the article that I needed.
The only problem is that it first shows the whole page and then remove less than 1 sec. There is a blink of change.
How can I not showing the page unless JS is completed?
Currently I overlay a rectangle on top of the browser once OnLoadingFrameComplete then remove the overlay and display browser...
Thanks
You pass your URL to Awesomium to load your view (html). I am sure you have an access to your view (html) in your project directory, so you can add style of display:none to that section of the page in html part and then in your JS once your JS is completed show that section that is hidden.

Reloading Website without stopping JS code

I am trying to run a JS script on a website (not my own) and I want it to refresh the website, in order to check for updates. However, I have only found code online for reloading the entire page (location.reload(true), etc...), which clears any code that I have running through the console. I am new to JS so is there any way to refresh a page and keep the JS code running? Also might there be a way to only reload load a certain portion of the page?
Basically,
Reload website without stopping code
Using jQuery you can easily load any part of a page from a URL using AJAX. To fill the body element with the contents of a URL:
$('body').load('/page');
Your URL can respond with the segment of HTML you want to render, or you can request a full web page and grab just the segment you want buy adding a selector:
$('body').load('/page body');
The page isn't technically refreshed, just the HTML content inside the body (or whatever element you select) is replaced. Any previously loaded header content like JS remains and keeps running.
There is no way to actually refresh the entire page without stopping the execution of the JavaScript code.
For doing updates on the page there would be two possibilities:
Use of AJAX (Asynchronous JavaScript and XML) to check for new updates on the page. There are some very good tutorials out there on the internet – just google »AJAX JavaScript«.
Use of IFRAME. Make a page and stuck all the stuff in it and then put that page in an iframe and then reload the iframe instead of reloading the entire page.
Hope I could help you.

How can I load the entire page using PJAX

Is it possible to load the entire page using PJAX and change the browser's page url?
My purpose is to prepare first the response to make sure that it would be loaded without refreshing the page in a long time after clicking in the menu-page-link or execute a javascript function.
I tried using PJAX but the one that provides a response data for the selected element to load where the request has to display.
Like:
$('a').pjax("#container", { fragment: "#container" });
I want and I tried:
$('a').pjax({url:"new-page.html"});
But it didn't work.
I'll appreciate your help and suggestions. Thank you!
Yes it is very much possible using jquery PJAX plugin , you can keep the header footer static and change the body content using PJAX , and yes it will change the url too along with browser history stack i.e. almost making it like a normal navigation, except that page wouldn't be refreshed.
But the container needs to be same in both the urls. You can try :
$(document).pjax('a', '#pjax-container')
You can load page via ajax but you cannot change page url, when you change it, it will automatic redirect to that address. This prevent phishing page, fake url.... But why you need to load page via ajax then change the url, why don't just change the url?

display an image while a page is loading in an iframe

I have a website with a menu, when menu item is clicked I display the page for that menu in an iframe(iframe is set to display home page initially by default). sometimes it could take few seconds to display the page for the selected menu item (for example reports) and I would like to display a loading image while the page is loading. how to do this using javascript or jQuery (sample code will be helpful)? thanks in advance.
Add the loading image to the iframe innerHTML ( or to a div and stop using iframe ) , then use ajax to fetch the new page content , on success iframe innerHTML becomes the content fetched by ajax witch overwrites the loading image . easy to setup but i recomend you stop using iframes
Usually you cannot know when the page finished loading in an iframe. The iframe loading is independent. What you can do is to get the content of the page that you have in the iframe through a ajax get request, and in this way do an animation while you wait for the content.
write a function to show the image and call it when you set the iframe src. when the page is loaded call from within the loaded page a function to hide the image (parent.HideImage)
I think the onload event of the iframe is not supported in all browsers

load page into div and keep the same page in div after refresh

I have loaded a page into div using jQuery. But when i refresh the webpage will go to initial stage?
How can i load the same page after refresh?
let the inital stage is
$("div").load("a.htm")
after clicking on a button it will load
$("div").load("b.htm")
now the division contains b.htm and after refreshing it is loading a.htm
I need to avoid this
if the div contains b.htm
after refreshing it should load the b.htm
how can i achive this????
Everytime you load a page into a div, you should alter the URL in the location bar to something like: http://example.com/#b.html. This will not navigate away from the current page, but when they reload (or open the saved bookmark), you can check the URL and use the part after # to indentify the page.
One possible way to achieve this is to use cookies. Once you load b.htm with AJAX set a client cookie and when you refresh the page check for the presence of this cookie and load the appropriate page.
You'll need to keep a note of which page is currently loaded, store it somewhere (local browser storage, or perhaps server-side), and on reloading your page checking against it and re-loading the div's content.

Categories

Resources