最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery, ajax, display page inside of other page (like iframe) - Stack Overflow

programmeradmin0浏览0评论

I need to display a page inside of a page, like an iframe, but using jquery. The pages are not on the same server.

The main page is a html page inside of a cms and the page that needs to be nested is a media page with lists of images or audio files, that is located on another server. The heights will vary on the media pages, so I kinda wanted to stay away from iframes... is there an easy call in jquery that will grab a page like an iframe... or one that degrades to an iframe if js is turned off at the browser level?

Thanks.

I need to display a page inside of a page, like an iframe, but using jquery. The pages are not on the same server.

The main page is a html page inside of a cms and the page that needs to be nested is a media page with lists of images or audio files, that is located on another server. The heights will vary on the media pages, so I kinda wanted to stay away from iframes... is there an easy call in jquery that will grab a page like an iframe... or one that degrades to an iframe if js is turned off at the browser level?

Thanks.

Share Improve this question edited Aug 15, 2010 at 3:18 Daniel Vassallo 345k72 gold badges512 silver badges446 bronze badges asked Aug 15, 2010 at 2:30 JeffreyJeffrey 4,14612 gold badges44 silver badges66 bronze badges 2
  • 1 The problem here is the 'other server' bit. Cross Domain restrictions on Javascript means that nothing that Javascript does can interact with domains outside the one its running on. Have you considered server-side solutions? – Yi Jiang Commented Aug 15, 2010 at 2:36
  • You see, the thing is, you could conceivably 'obtain' a page by passing the request through a server, thus getting around the cross-domain problem (such as my answer to this question stackoverflow./questions/3232668/…), but it still would not replicate what an iframe does because the CSS and Javascript on that page would 'spill over' and affect the parent page, unlike an inframe, which would contain it. – Yi Jiang Commented Aug 15, 2010 at 3:23
Add a ment  | 

4 Answers 4

Reset to default 2

Unless your external content is served from the same domain as your main web site, using AJAX for something like this is not that easy, because you'd bump into the same origin policy.

One solution to work around the same origin policy would be to set up a simple reverse proxy on the server, which will allow the browser to use relative paths for the AJAX requests, while the server would be acting as a proxy to any remote location.

If using mod_proxy in Apache, the fundamental configuration directive to set up a reverse proxy is the ProxyPass. It is typically used as follows:

ProxyPass     /external/     http://other-domain./

In this case, the browser would be able to request /external/index.html as a relative URL, but the server would serve this by acting as a proxy to http://other-domain./index.html.

Then in your JavaScript, you would be able to use the jQuery load() method as follows:

$('#your_div').load('external/index.html');

Another option is to use an iframe, and adjust its height dynamically with JavaScript. You may want to check the following Stack Overflow posts for further reading on this topic:

  • Resize iframe height according to content height in it
  • Dynamically Resizing an Iframe

You may also want to consider a full server-side solution as @Yi Jiang suggested in a ment above. You could inject the HTML from the external site into your main site before serving it to the client's browser.

Mozilla has added Cross-Site-Requests. It's an new HTML5 Standard. But mon do not allow Cross-Site-Requests. So you have to do something like mentioned before. If you will use the PHP-Solution, use this:

<?php
    $external = file_get_contents($_POST['external']);
    echo $external;
?>

$().post("ajax.php", {external: "http://www.example./"}, function(data) {
    html = $("div#extract", data).html();
    $("div#insert").html(html);
}, "html");

You're going to have a hard time getting Ajax content from a different domain. Browsers will not allow it to prevent cross site scripting exploits (XSS). You may be able to use a php based proxy, cURL, or a google Ajax API.

The other alternative is to just use an iframe, and have JavaScript get the content heights, and set the iframe height to be the same (plus padding so browsers don't display scrollbars).

Ajax by definition only works on the same server, due to the same origin policy. What you would need to do is load a page from another server in a PHP file (let's call it xxx.php). Then, you can load xxx.php in div yyy with the following code:

$("#yyy").load("xxx.php");

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论