loading remote page into DOM with javascript - javascript

I am trying to write a web widget which will allow users to display customized information (from my website) in their own web page. The mechanism I want to use (for creating the web widget) is javascript.
So basically, I want to be able to write some javascript code like this (this is what the end user copies into their HTML page, to get my widget displayed in their page)
<script type="text/javascript">
/* javascript here to fetch page from remote url and insert into DOM */
</script>
I have two questions:
how do I write a javascript code to fetch the page from the remote url?
Ideally this will be PLAIN javascript (i.e. not using jQuery etc - since I dont want to force the user to get third party scripts jQuery which may conflict with other scripts on their page etc)
The page I am fetching contains inline javascript, which gets executed in an body.onLoad event, as well as other functions which are used in response to user actions - my questions are:
i). will the body.onLoad event be triggered for the retrieved document?.
ii). If the retrieved page is dumped directly into the DOM, then the document will contain two <body> sections, which is no longer valid (X)HTML - however, I need the body.onLoad event to be triggered for the page to be setup correctly, and I also need the other functions in the retrieved page, for the retrieved page to be able to respond to the user interaction.
Any suggestions/tips on how I can solve these problems?

There are two approaches to this.
The host site uses an <iframe> tag to include your page in a fixed-size box inside their page. It operates in its own document with its own <body> and onload event; it is in your site's security context so it can use AJAX to call back to your server if it needs to for some reason.
This is easy; the guest page doesn't even especially need to know it is being included in an iframe.
The host site uses <script src="http://your-site/thing.js"></script> to run a script from your server. Your script creates a load of content directly inside the host document using document.write() or DOM methods. Either way you know when you've finished putting them in place so you don't need onload.
You are running in the host's security context, so you can't AJAX to your server or look at your server's cookies directly; any such data must be served as part of the script. (You can look at the host server's cookies and cross-site-script into any of their pages, and conversely if there is any sensitive data in your script the host site gets to see it too. So there is an implicit trust relationship any time one site takes scripting content from another.)

Related

how to set up a simple web page within the google app script (or by pass the limitation of hosting single html file)?)

I am trying to set up a web application that contains 2 html pages. One is the login page and another present the data. However, I have difficulty re-loading or doing DOM manipulation once the user click the login button (which called a server-side function). I have read from previous instruction that google app script could only host one HTML and dose not support DOM manipulation. I tried to do reload the page but it dose not work. Is there any way to bypass the limitation ?

AJAX App JavaScript Loading Issue

I am creating a complete ajax application where there is one base page and any pages the user navigates to within the application are loaded via ajax into a content div on the page. On the base page I include the various scripts that are needed for every page within the application (jQuery, jQuery-UI, other custom javascript files). Then on the various pages with the application I include a script or two for each page that contains the logic needed for just that page. Each of those script files have something that executes on the page ready event. The problem is that every time the user navigates to page1, the page1.js file is loaded. So, if they visit that page 10 times, that script is then loaded ten times into their browser. Looking at the Chrome script developer tools after running around the site I see tons of duplicated scripts.
I read somewhere about checking to see if the script has already been loaded using a boolean value or storing the loaded scripts in an array. But, the problem with that is that if I see the script is already loaded and I don't load it, the page ready function doesn't get fired for the page's javascript file and everything fails.
Is there an issue having the javascript file loaded over and over when the user visit the same page multiple times?
I did notice looking at the network traffic that every time we visit the page, the script is requested with a random number parameter (/Scripts/Page1.js?_=298384892398) which causes the forced request for the script file every time. I set the cache: true settings on the jQuery ajaxSetup method and that removed the parameter from the request and thus the cached version of the javascript file was loaded instead of actually making a separate HTTP request for it. But, the problem is that I don't want all the ajax requests made to be cached as content changes all the time. Is there a way to force just javascript files to be cachced but allow all other ajax requests to be not cached.
Even when I forced caching on all requests, the javascript file still showed up multiple times in the developer tools. Maybe that isn't a big deal but it doesn't seem quite right.
Any advice on how to handle this situation?
About your first question:
Every time you load a JavaScript file, the entire content gets evaluated by the browser. It solely depends on the content if you can load and execute it multiple times in a row. I'd not consider it a best practice to do so. ;)
Still i'd recommend that you find a way to check if it was already loaded and fire the "page loaded" event manually within the already present code.
For the second question: I'd assume that the script is intended to show up multiple times when including it multiple times. To give an advice on how to not cache the loaded JS i'd need to know how you loaded the code, how you do AJAX and the general jQuery setup.
After doing some more research it looks like it is actually just a Chrome issue. When you load a script via AJAX you can include the following in your code to get it to show up in the the Chrome developer tools
//# sourceURL=some-script-name
The problem is that when you navigate away from the page, the developer tools keeps the script around, but it is actually not longer referenced by the page.

Append javascript/html to page when navigating from a different page?

Alright, first off this is not a malicious question I'm asking. I have no intentions of using any info for ill gains.
I have an application that contains an embedded browser. This browser runs within the application's process, so I can't access it via Selenium WebDriver or anything like that. I know that it's possible to dynamically append scripts and html to loaded web pages via WebDriver, because I've done it.
In the embedded browser, I don't have access to the pages that get loaded. Instead, I can create my own html/javascript pages and execute them, to manipulate the application that houses the browser. I'm having trouble manipulating the existing pages within the browser.
Is there a way to dynamically add javascript to a page when you navigate to it and have it execute right after the page loads?
Something like
page1.navigateToUrl(executeThisScriptOnLoad)
page2 then executes the passed script.
I guess it is not possible to do it without knowledge of destination site. Although you can send data to the site and then use eval() function to evaluate sent data on destination page.

How can I use progressive enhancement techniques to progressively load a slow page?

I've got a portal page in ASP.NET MVC with a few different sections (partial views), some of which will be unavoidably slow the first time a user accesses them, because they have to pull in up-to-date data from an external internet source.
Some of this data can be loaded almost immediately, but the old "Web 1.0" design just goes to a "loading" page until all of the data is available. I'm trying to improve the user experience by immediately displaying the local data, and then using a couple of ajax updates to display the remote data a few seconds later.
Of course I want to do this using progressive enhancement in case the Javascript breaks, gets blocked, or isn't supported for whatever reason. My first thought was to use a meta refresh and disable it with javascript, but apparently that's impossible. I'm also violently opposed to the idea of a window.location redirect, because (a) it's highly perceptible, unlike a server redirect, and (b) it's well within the realm of possibility for the JS redirect to work but the ajax to still break (think IE6, ill-behaved mobile devices, etc.)
Is there some way I can build up a page that loads in stages, but still works with plain HTML?
I've solved this in the past with a couple of approaches: one is to create separate pages for the slow content, so that users who don't have or don't get JS for some reason can click a link to get the content. The experience is different, but works.
Another way to do it is to have a "show" link in the areas that are deferred. JS removes the link and inserts the content. If the user wants to see the content they click the link, triggering a refresh that will not defer the content.
As Ali points out in his comment, using iframes for the slow-loading content seems like the way to go.
If your ajax routines do more than just load the content (for example if you are reformatting the data in some way) you can go one step further and use javascript to remove the iframe on load, then use your normal ajax routines to load the content as you wish.
So users with javascript disabled still see the content but your local content loads quickly, while users with javascript enabled will have a nice ajax experience.
To remove the iframe using jquery you can do something like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<head>
<body>
<div>Fast Loading Content...</div>
<iframe id="slowContent" src="http://example.com/slowLoadingContent.htm"></iframe>
<script type="text/javascript">
$('#slowContent').remove(); // removes both the iframe and any bound events
// execute your ajax routines to pull in the slowLoadingContent and modify as appropriate
</script>
</body>
</html>
I suppose this depends on the nature of the data that you're pulling in, but "progressive enhancement" in this case might be serving the page without the external content to clients who don't have javascript available, then pulling in and inserting content using javascript where you can. Personally I'd be concerned (slightly) with the "no javascript available" case, but not concerned with the "javascript breaks" case, because error handling in your javascript can take care of the "ajax didn't work properly" scenario.
If you absolutely must all-or-nothing render the page, you can have a "reload this page in a minute to see the rest of the content" message/link.
Otherwise "frames" (using ) or separate pages are a pretty good plan.

monitoring iframe content/status from the parent page

What methods are available to monitor the status of IFRAME page, I know there are security limits but I hope some small notification system is still possible.
My situation is that I have created a parent page that is located on customer's server, and this page has has iframe page located on my server (my domain). I need to somehow communicate a little between these two:
Can I make javascript to the parent page that can check if my iframe page has a specific string on it, or somehow make iframe page to notify the parent page?
Is there e.g. any possibility to make a timer that checks iframe content time to time?
I also accept answer how mydomain/client.page calls callback on customerdomain.intranet.com/parentpage.htm that has client on iframe
You need to use cross site JavaScript techniques to be able to do this. Here is an example.
Put another file into your server, call it helper.html, include it to your file served by customers server using an iframe. Set the src of the helper.html iframe with adding get parameters, ie. http:/myserver.com/helper.html?param1=a&param2=b, in the helper file use javascript to call method on parent's parent ( parent.parent.messageFromIframe(params) ). Which is the page on your server itself. Since helper and the container page are on the same domain it should work. The technique is popular, for instance Facebook was using it for their Javascript api.
I got information that this is possible by setting parent.location (from iframe) to have hash data like this "mydomain.com/mypage#mymessage"
By default, security restrictions in the browser will prevent access from/to the document in the iframe if it is in a different domain to the parent page. This is, of course, just as it should be.
I believe this would prevent even checking the current location of the iframe, but that's easily testable. If it's accessible, then you could poll the iframe for its location, and whenever the page in the iframe updates, have it append a random querystring parameter. Comparison of that parameter to the value from the previous poll would tell you if it's changed.
However, as I say, I suspect it's not possible.
Edit: This question suggests it is only possible for the initial src attribute: How do I get the current location of an iframe?

Categories