Question

对于我正在开发的Web应用程序，我需要从页面otherPage.html到我的页面myPage.html

显示一个特定的div（已知#id）

这两个页面都托管在同一台服务器上，并且是同一个域。

我可以使用iFrames或发出AJAX请求并在div中显示内容。

有没有办法只使用Javascript来做到这一点？如果是，那么任何人都可以帮助我如何实现这一目标。

非常感谢任何帮助。

由于

Answer 1

查看jquery load()方法。非常容易实现，并且可以接受目标div的id作为参数。

Answer 2

我以前做过这个in my answer here，这是我的代码：

<强> HTML：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <style type="text/css">
body {
    background: #ccc;
    text-align: center
}
#article {
    padding: 30px;
    margin: 20px;
    text-align: left;
    background: #eee;
    text-shadow: 1px 1px #fff;
    text-shadow: 0 0 3px #fff;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
.loading {
    text-transform: uppercase;
    font-size: 15pt;
    text-shadow: 1px 1px #f00, 1px 2px #f00, 2px 2px #f00, 3px 3px #f00;
}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
var origText = '';
$(document).ready(init);
function init() {
    origText = $('#article').text();
    $('select').on('change', changed);
}
function changed(e) {
    $('#article').html('<span class="loading">Loading...</span>');
    $('#article').load('article2.php', $.param({0: e.target.value, 1: origText}));
}
    </script>
</head>
<body>
    <h1>AJAX Example</h1>
    <select name="select-choice-8" id="select-choice-nc">
        <option value="">Choose One...</option>
        <optgroup label="News">
            <option value="feature">Feature</option>
            <option value="current">Current</option>
            <option value="research">Research</option>
        </optgroup>
        <optgroup label="Archive">
            <option value="archive">Archive</option>
        </optgroup>
        <optgroup label="Video">
            <option value="video">Video</option>
        </optgroup>
        <optgroup label="Submit">
            <option value="story">Story</option>
            <option value="event">Event</option>
        </optgroup>
    </select>
    <div id="article">Please select an article to view.</div>
</body>
</html>

PHP：（article2.php）

<?php
$selected = $_GET[0];
$articles = array(
        '' => $_GET[1],
        'feature' => 'Feature article goes here',
        'current' => '<p>Lorem ipsum dolor sit amet, denique laetare in rei exultant deo, euismod tollam impedit intra tectus Scrutor audire servi. Euro in rei civibus corporis sustinuit virginis piratae apprehendat mecum liberalia revertere in. Accedens est Apollonius in modo genito in. Habet vero cum magna amici invocat manibusque removit benedictus filiae gloriam. Nuntiatur hoc puella ut casus tui ex quae, audiens suis caelo dicit semper coniungere. Nulla famulis unde meae ceroma fronte comico hac civitati mearum. Aureos mercatoris vidisset stabat somnis quidquid es, dabo es est se sed dominum in. Tharsum cuius suam ad te in rei civibus. Sit in rei civibus unde non dum miror diligere quem non potentiae. Ecce adhibitis amor ea communia ei Taliarchum in fuerat est cum autem quod una in rei civibus. Erige me testatur in lucem in deinde duas recitare ex sic ut casus turbata procidit est in modo. Convivium laetatus ait mea Christianis aedificatur ergo Apollonius ut a civitas Conservus mihi Tyrum reverteretur. Zurziaca in lucem exitum atque armata mare demonstrantibus, de tuae meorum defleret ergo est se vero diam ille. Quaere allocutus ait in deinde cupis ei quoque moriatur prostravit. Apollonius non solutionem ascendens sed dominum depressit filia puella est amet coram te princeps age cum magna amici se est Apollonius.</p>
<p>Maria cum autem est cum suam vidit loco in modo ad quia illum decidat quam cara in. Est amet Cur meae ad te ad te princeps ea. Ipsa quod eam in modo invenit nutricis intravit primum gaudet uxoris tibi afferri magistrum. Laetitia filia navem in deinde vero rex Dionysiadi me, cumque autem quod tamen sed eu fides piissimi sibi adsedit. Dianae feminis introeunte instat manu certas parturiens a, cives ego illum Apollonii appropinquat tation ulterius a. Iacentem exaudire Ago publico spectaculum praeberi qui non potentiae.</p>
<p>Nisi se sed quod ait regem adventu nihil, tempor ipsius epulabatur qui dicens unam lacrimae eam ad quia. Perveniunt felicibus oportebat eum in deinde plectrum anni ipsa codicellos pedes egit Apollonius. Possit caput dixit est cum autem Apolloni ex civibus. Purus dum veniens indica enim materiam profusis. Notus ingreditur lavare propter quae. Bene accidentium in lucem exitum atque ut diem obiecti ad per sanctus primum gaudet in deinde cepit roseo. Antioche in lucem concitaverunt in fuerat est se in fuerat se in fuerat accidens quam aniculae morsque nutricem. Sit audivit per te sed haec aliquam inlido laetare in. Ipsa Invitamus me naufragus tabulas morsu tuum abscondere in fuerat eum ego esse haec aliquam. Dona abstulit meis caligine tempestas sabano praeclusoque sponte profundo. Post petiit materia amicis ad quia ei. Tyrus pro quae non solutionem invenisti, primam filia omnes civitatem in deinde duas formis.</p>
<p>Stet consequat Verena est amet coram te in modo invenit ubi diceret sub. Contine inauditas actualitas tuae meorum sic. Deo agili est cum unde non potentiae quem non coepit cognitionis omnium. Mea in deinde cepit roseo ruens sed dominum vidit tam, longa ferri Lorem post iactavit ad per animum est cum. Archistrate accepta quaestionum ut casus tui apparatu! Intuens munus oblitus ait Cumque autem Apolloni codicellos. Nulla certantes non potentiae Apollonium in modo genito in deinde duas recitare. Civitate virginitatis rex ut sua. Tyrio alius est cum obiectum dixit hoc contra suis ut libertatem accipies. Eiusdem ordo quos annorum nostros versi tuam vero diam omni completum respondit. Potest contremiscunt pater in deinde duas horrido in fuerat accidens suos faciam atque bona dei. Patris super audire propter quae ad suis. Erras nisi Apollonius ut sua confusus ait Cumque hoc. Ascendens sed dominum oculos rex.</p>
<p>Quaestiones patre ad per accipere nescio qui enim materiam ad te finis puellam flentem sub dixi die. Sanctae Stranguillionis in deinde plectrum anni ipsa hospes navis famuli dabit. Vini ad suis ut casus homini nocte. Triton testandum ecce habitu in fuerat construeret in deinde duas recitare ex sic. Fige omnium Ephesum peteret sua etiam esse more defuncta ait. Virginem ipsa quod eam ad nomine, valde hinc Dionysiade conspectu meam contra serpentibus. Chaldaeorum in lucem in fuerat, euismod tollam impedit mecum est Apollonius. Re est cum obiectum est in deinde cupis ei sed esse deprecor. Quis nudus solum puella est amet consensit cellula filia navem causa alia vero rex ut casus homini interimat potius aureos. Nubila grata gratias elegisti sibi afflictione magnam miserum Rheni codicellos numquam existimarent ergo est cum magna duobus auro fulgida. Antiochi quidditas tuo quid facilisis ex civibus, scilicet Athenagora mihi cum obiectum aliquip ipsa mihi. Pater unica suae constituit ad suis! Nutricem sum illum in fuerat se vero quo contra suis est Apollonius eius.</p>
<p>Ut sua coniuge rex cum unde ascendit deferunt provoces. Horreo Athenagora eius ad te in lucem genero. Amice suspiciosa mare convivio ubi ait regem consolatus dum est Apollonius eius. Tyri aliquam inlido laetare quod eam in deinde cepit roseo ruens sed. Carissimi deo adiuves finem ibi Neptune reddens pater unica restitutus mancipia in, nec caecatus dum miror puella eius sed haec puella. Aliqua ait Cumque materia effigie scit voluntatem nolunt ac iuro es.</p>
<p>Tyri aliquam inlido laetare in fuerat accidens inquit fidem emam poena Apollonius in lucem in rei completo litus tuos ratio iuvenis. Quantum est cum suam ad quia. Adfertur guttae sapientiae decubuerat age cum magna duobus auro recreari tunc Tharsos princeps coniungitur vestra in fuerat. Alia se ad suis ut diem obiecti. Introivit gubernum defunctam vivum eum istam vero rex cum suam non coepit contingere navis famuli sed eu fugiens laudo in! Ratione omnes Hellenicus dixisset perrexisset pueris plus plorantes abscederem assignato ipsum dolore me missam canticis in fuerat accidens inquit merui. Solum ei sed quod ait est se sed eu. Suum quibus ut sua confusus eos cui Tharsia adulescens qui auri eos in fuerat. Omnia bono quomodo possum es ego esse ait Cumque hoc puella mihi.</p>',
        'research' => 'You selected <code>research</code>',
        'archive' => 'Archives',
        'video' => '<div style="font-size:48pt;font-weight:bold;font-style:italic;background:red;text-align:center;padding:20px;margin:10px;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;">Video</div>',
        'story' => 'Submit a story',
        'event' => 'Submit an event'
    );
$article = $articles[$selected];
echo $article;
?>

使用Javascript将特定div加载到iFrame或div中

2 个答案: