We Keep Coding

Fetching a document by its URL via Javascript

I'm trying to fetch an HTML document object, not the text of the page, given its URL, via Javascript. The reason I need the Document object is so I can look for a given classname and take a certain action if it exists.

If the page is in the same domain (i.e. a relative path) you could load it inside a hidden iframe, and access the document from window.frames as shown here

function saveDataToVariable(data) {
var html = data;
// do something
}
$.get('any.html', saveDataToVariable);
this will give you the complete html output of a given html page... also including the html or div tags an anything else will be included and you can parse it afterwards as you need

Set Iframe Source on Remote Page via URL Parameter

I have 3 pages that I am working with.
shop_mobile.php
This page retrieves product data from MySQL db and lists formats it. It accepts the url parameters brand=BRANDNAME and cat=CATEGORY.
Here are two examples of this page in action:
http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters
http://solanocycle.com/shop_mobile.php?brand=peacesports&cat=Peace%20Sports%20Scooter
vehicles.html
This page contains links to view specific product listings pages (i.e. "KYMCO Scooters", "Peace Sports Scooters"). When these links are clicked, they should all take the user to the same page (view.html) but pass URL parameters which tell the Iframe within view.html which url to use as its source.
view.html
This page contains an Iframe which gets its source from the URL parameters passed by the links from vehicles.html
Note:
I tried using the solution provided at How do I pass URL parameter to an iFrame in Wordpress page? to solve my problem, but I have never used jquery before and I was not able to get it working correctly.
Any help would be greatly appreciated.
More Info
Sample of a link from Vehicles.html
KYMCO Scooters
What I think View.html should do:
Extract "http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters" from the url "view.html?http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters" and store it as a variable called $embedLink.
Display an Iframe with $embedLink as its source url.

Assuming your link(s) on vehicles.html are well structured, as follows:
view.html?url=http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters
The necessary jQuery for view.html would be:
<script type="text/javascript">
$(document).ready(function(){
var regex = /\?url=(.*)/,
$embedLink = document.location.href.match(regex)[1];
$('iframe').attr('src', $embedLink);
});
</script>
Obviously you would replace 'iframe' with an id or class of the iframe to be more specific.
The alternate would be to use php to extract the request parameter and echo it out in place of the iframe's src attribute:
<?php $embedLink = (isset($_GET['url']) ? $_GET['url'] : ''); ?>
<iframe src="<?php echo $embedLink; ?>"></iframe>
I would recommend performing sanitisation of the request parameter in both cases in order to prevent XSS.

How to append the HTML results of a URL call to the DOM?

I have a URL that resides on another domain, like this:
http://ads.adserver.com/ad?site=1233&zone=45435
When you type this URL in the browser, the result is HTML like this:
<img src="htt://ads.adserver.com/i/image.gif" border="0"/><br/>Test
The above renders as an image wrapped in a link with a second link below it.
I tried to capture this URL in a script tag and append it to the DOM, but it does not render the HTML above.
var ad_script = document.createElement('script');
ad_script.type = 'text/javascript';
ad_script.src = 'http://ads.adserver.com/ad?site=1233&zone=45435';
li.appendChild(ad_script);
Are there any other ways of invoking this URL and putting the result on the page? I can't use $.getScript() since I'm not invoking this in the global context. I need this HTML to appear exactly where I want it to appear.
EDIT: The only reason I am trying this route is that the third-party does not provide a JSON-P interface.
EDIT2: Unfortunately, I am not on an application server.
EDIT3: This is for iPhone.

You are limited to how you load this due to cross-domain issues .. an easy way would be to load the image in it's own iframe
<iframe src='http://ads.adserver.com/ad?site=1233&zone=45435' height='200px' width='200px' />

You'll want to use ajax for this. The easiest way might be jQuery's .load() method.
Assuming the element you want the content to go into has an id of holder, you would do
('#holder').load('http://ads.adserver.com/ad?site=1233&zone=45435')
It will put the contents of the webpage into your selected element. http://api.jquery.com/load/
edit: Sorry, forgot cross-site ajax limitations. You could instead set up a php page like:
if(isset($_GET['url'])){
echo file_get_contents($_GET['url'])
}
and then do
('#holder').load('http://yoursite.com/yourpage.php?url=http://ads.adserver.com/ad?site=1233&zone=45435')

Take the jsonp approach. use an actual script tag and put an executing javascript function as the response that adds that html markup to the dom. It will add it to the dom of the page where the script tag resides.

There are a number of jQuery ajax calls that can accomplish this, for example:
jQuery.get('http://ads.adserver.com/ad?site=1233&zone=45435', function(data){jQuery(updateElementQuery).html(data);});

Try to use jquery method 'load'
`$('#result').load(url, function(response) {
$('#my-li').append($('#result').html());
$('#result').html(null);
});`
... where #result is some hidden div

how to set href value at runtime through javascript?

i have created a html page which contain two iframe .
first iframe refer another html which contain a list of members
this list is not fixed and every member name there is a separate html page. which is shown by second iframe.
i have written some javascript code to get the value of that list but i am unable to update the src link of second iframe.
document.getElementById("frame2").setAttribute("src", name);
i have used this code to set the value but i didn't work. i have written this code in javascript file in setFileName(name) function.this is user define function.

might want to give this a try:
window.frames["frame2"].src = name
Information from: Changing Iframe source using Javascript

I have faced this query once and following article helped me. Hopefully it will be useful to resolve your issue.
http://www.dyn-web.com/tutorials/iframes/

i got my answer
top.parent.frame2.location = name;
like this we can change the src of another frame.
thanks all of you..

How to insert URL parameter in DIV?

my code is
<a href="#" target="_blank" class="floatLeft" onclick="change('http://localhost/allwidgets/widgets.html');" >
function change(url)
{
alert(url);
document.getElementById("mainOuter").innerHTML=url;
}
Actually I want that url should go in innerHTML of mainOuter div and that page should display in that.
Please suggest....
Thanks

It sounds like you may actually want an iframe:
<iframe id="someIframe"></iframe>
document.getElementById("someIframe").src = url;
If you want to actually modify a DIV's innerHTML, then you need to use a AJAX request to get the desired HTML, then use innerHTML. Libraries can make this easier.

You can't do like this. There are to possible ways to do this.
Method 1
You can use an iframe and load the page corresponding to the url by giving iframe's source as the url.
Method 2
You can use .load method of jQuery to load a page using the url. Something like
$('#mainOuter').load(url);