3

AnyOriginを使用してURLをiframeにロードしようとしています。

問題：空のフレームが読み込まれますが、何が間違っていますか？

コード：

<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<meta charset="utf-8">
<script type="text/javascript">
$.getJSON('http://anyorigin.com/get?url=google.com&callback=?', function(data){
    $('#output').html(data.contents);
});
    </script>
</head>
<body>
<iframe id="output"></iframe>
</body>
</html>
4

1 に答える 1

3

AnyoriginはJSONPを使用するため、AJAX呼び出しを使用してロードすることはありません。代わりに、callbackクエリパラメータは関数名である必要があり、通常のスクリプトタグのようにロードする必要があります。

<script src="http://anyorigin.com/get?url=google.com&callback=myCallbackFunction"></script>

スクリプトが読み込まれると、コールバッククエリパラメータで指定した名前の関数が自動的に実行されます。もちろん、それが機能するためには、次のように定義された関数が必要です。

<script>

    function myCallbackFunction(myData) {
         //myData.contents has your html, do something here
    }

</script>

関数はスクリプトの前に定義する必要があるため、スクリプトを動的に埋め込むか、スクリプトの前に関数を定義する必要があることに注意してください。

iframeにデータを入力する方法や、関数のコールバックを宣言する方法など、いくつかの注意が必要な部分があるため、ここに完全な例を含めました。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function myCallbackFunction(myData) {
    $(function() {
        $("#test").contents().find('html').html(myData.contents);
    });
}
</script>
<script src="http://anyorigin.com/get?url=http://google.com/&callback=myCallbackFunction"></script>
</head>
<body>
</body>
<iframe id='test' style='width: 100%; height: 100%'>

</html>

iframeのコンテンツを更新するための呼び出しをjqueryドキュメントのonloadイベントでラップしたことに注意してください。それが行われない場合、呼び出しは存在する前にiframeにデータを入力しようとし、サイレントに失敗します。

于 2013-03-01T06:35:18.200 に答える