jQueryのload（）関数を使用せずにDIVに外部要素IDをロード

Question

このプロジェクトの以前の問題について大きな助けを得ましたが、今はもっと複雑になっています。これはQです&質問、4つの可能な回答、およびその下の回答ボタンがあるプロジェクトは、ボタンの上に隠されたdivの回答を表示します。答えが実際にdivにあるときにはうまくいっていますが、今は空のdivに外部HTMLファイルからの答えを読み込む必要があります。 jQueryのload（）関数はブラウザでうまく機能しましたが、このプロジェクトはiBooks用の拡張されたepubファイルです。これは明らかにload（）関数を許可していません（jQueryを許可しています）。

load（）を使用せずにDIVに要素IDをロードする別の方法はありますか？また、これは複雑になっているので、別のdivを開くときに前のdivを閉じるためにどのようにトグルを得るのですか？

のjQuery：

$(function() { 
    $(".answer").click(function() { 
     $(this).prev(".content").load($(this).attr('href')).toggle("slow"); 
    return false; // And prevent it following the link 
    }); 
}); 

CSS：

div.content { 
    display: none; /*--hidden by default--*/ 
    width: 300px; 
    height: auto; 
    margin: 10px; 
    padding: 20px; 
    background: white; 
    border: 1px solid black; 
    cursor: pointer; 
} 
a.answer { 
    font-family: sans-serif; 
    font-weight: bold; 
    font-style: normal; 
    font-size: 0.92em; 
    line-height: 3em; 
    text-indent: 0em; 
    text-align: left; 
    margin: 1em 0em 0em 1em; 
} 

HTML：任意の助けを事前に

<div class="keep"> 
    <p class="q"><samp class="q-no">1.</samp> Interpret the following directions:</p> 
    <p class="q-equation">i cap po qid × 10d</p> 
    <p class="an"><span class="choice">a.</span> Take one capsule by mouth four times a day for ten days.</p> 
    <p class="an"><span class="choice">b.</span> Take one capsule by mouth three times a day for ten days.</p> 
    <p class="an"><span class="choice">c.</span> Take one capsule by mouth twice a day for ten days.</p> 
    <p class="an"><span class="choice">d.</span> Take one capsule by mouth once a day for ten days.</p> 

    <div class="content"> 
    </div> 

    <a class="answer" href="04b-Ch4-Answers.html #anchor-24-anchor">Answer</a> 
</div> 

<div class="keep"> 
    <p class="q"><samp class="q-no">2.</samp> Interpret the following directions:</p> 
    <p class="q-equation">ii tab po tid × 7d.</p> 
    <p class="an"><span class="choice">a.</span> Take two tablets by mouth four times a day for seven days.</p> 
    <p class="an"><span class="choice">b.</span> Take two tablets by mouth three times a day for seven days.</p> 
    <p class="an"><span class="choice">c.</span> Take two tablets by mouth twice a day for seven days.</p> 
    <p class="an"><span class="choice">d.</span> Take two tablets by mouth once a day for seven days.</p> 

    <div class="content"> 
    </div> 

    <a class="answer" href="04b-Ch4-Answers.html #anchor-25-anchor">Answer</a> 
</div> 

感謝。

Answer 1

まず、同じorigin-policyに問題があるかどうかを確認します。これにより、実行中のドメインとは異なるドメインのサイトからajax経由でコンテンツにアクセスできなくなります。詳細はMDN referenceを参照してください。

Chromeのようなブラウザでは、デバッグコンソールをチェックして、同じ起源の問題が原因でブロックされたリクエストがあるかどうかを確認できます。

jQueryを使用することはできませんが、​​（これは同じ起源のポリシーの問題だと思われます）という理由ではありませんが、本当にそうであれば、独自のミニバージョン​​の内容をajaxで取得し、divに結果を入れてください。参考までに、元の問題と同じ場合は、このように回避することはできません。あなたは、あなたがデータを要求できる同じドメインにあるサーバーを持っていなければなりません。そして、それはあなたのために他のサイトからデータを取得する必要があります。または、別のドメインにJSONPを使用できる協力サーバーを用意する必要があります。