0

ページの Jquery Mobile コンテンツには、次のような img src があります。

<img id="map" src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false" height="200" width="288" />

上記のIMGのSRCをjavascriptで変更するボタンとコードがあります

<script type="text/javascript">
        function update()
        {
            cval = '"https://maps.googleapis.com/maps/api/staticmap?center=Brisbane&amp;zoom=14&amp;size=288x200&amp;markers=Brisbane&amp;sensor=false"'
            $('#map').attr('src',cval);

        }
    </script>

ページが正常に読み込まれ、マップ イメージが表示されます。しかし、ボタンからスクリプトを呼び出すと、エラーが発生し、画像が表示されません。Chrome Inspect Elements を見ると、最初の呼び出しは GET であり、画像が読み込まれますが、2 回目の呼び出しも GET ですが機能せず、エラーは「禁止されています」です。

ユーザーが新しい場所を入力して [更新] をクリックしたときに、IMG を新しい場所に更新するようにモバイル ページを作成しようとしていますが、これによりエラーが発生します。

ここで何が問題なのですか？最初の GET が機能するのに 2 番目の GET が機能しないのはなぜですか? また、これを機能させる方法を教えてください。

また、ブラウザに URL を貼り付けるだけでは機能しません。

4

1 に答える 1

1

単に属性<img>を切り替えるのではなく、新しい を作成することで回避しました。src

http://jsfiddle.net/lollero/VKAW9/1

HTML:

<img id="map" src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false" height="200" width="288" />

jQuery:

$('html').on("click", function() {

    var map = $('#map'),
       cval = 'https://maps.googleapis.com/maps/api/staticmap?center=Brisbane&amp;zoom=14&amp;size=288x200&amp;markers=Brisbane&amp;sensor=false';

    $('<img id="map" height="200" width="288" src="'+ cval +'">').insertAfter( map );
    map.remove();

});
于 2013-01-21T09:32:11.977 に答える