Loading a remote page into the DOM using javascript
I am trying to write a web widget that will allow users to display customized information (from my site) on their own web page. The mechanism I want to use (to create the web widget) is javascript.
So, basically, I want to write javascript code like this (this is what the end user copies to their HTML page to display my widget on 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 javascript code to fetch a page from a remote url? Ideally this would be PLAIN javascript (i.e. don't use jQuery, etc.) as I don't want to force the user to get third-party jQuery scripts that might conflict with other scripts on their page, etc.)
-
The page I receive contains inline javascript that is triggered on the body.onLoad event, as well as other functions that are used in response to user actions - my questions are:
I am). will fire the body.onLoad event for the retrieved document ?. II). If the retrieved page is dumped directly into the DOM, then the document will contain two sections <body>
that are no longer valid (X) HTML. However, I need the body.onLoad event to fire for the page to be configured correctly, and I also need other functionality on the retrieved page so that the resulting page can respond to user interaction.
Any suggestions / advice on how I can resolve these issues?
source to share
There are two approaches to this.
-
The site site uses a tag
<iframe>
to include your page in a fixed-size box within its page. He works in his owndocument
with his own event<body>
andonload
; it is in the security context of your site, so it can use AJAX to return to your server if needed for any reason.It's easy; the guest page doesn't even need to know that it's included in the iframe.
-
The host site uses
<script src="http://your-site/thing.js"></script>
to run the script from your server. Your script creates content loading directly inside the node document using methodsdocument.write()
or DOM. Either way, you know when you're done placing them so you don't need toonload
.You are running in a host security context, so you cannot use AJAX on your server or view your server's cookies directly; any such data should be served as part of the script. (You can look at the host and cross-site-script cookies on any of your pages, and conversely, if there is some sensitive data in your script, the host site will see it too.the trust relationship anytime one site takes scripted content from another.)
source to share