29

Javascriptのみでフォームを作成しています。内にある入力フィールドの値を取得するために Javascript を使用しようとしていますiframe。内にあるフィールドの値を取得することは可能iframeですか?

4

4 に答える 4

35

フレーム化されたサイトが別のドメインにある場合、リモート iframe から値を直接読み取ることはできません。それでも、答えはイエスです。独自のドメインを介してフレーム化されたサイトをプロキシすることで、その値を取得することは依然として可能です.

たとえば、私のサイトの HTML ページには、別の Web サイトからコンテンツを取得した iFrame があります。iFrame コンテンツは単一の選択フィールドです。

サイトで選択した値を読み取れるようにする必要があります。つまり、自分のアプリケーション内で別のドメインの選択リストを使用する必要があります。サーバー設定を制御することはできません。

したがって、最初は次のようなことをしたくなるかもしれません (簡略化):

私のサイトの HTML:

<iframe name='select_frame' src='http://www.othersite.com/select.php?initial_name=jim'></iframe>
<input type='button' name='save' value='SAVE'>

iFrame の HTML コンテンツ (select.php別のドメインから読み込まれる):

<select id='select_name'>
    <option value='john'>John</option>
    <option value='jim' selected>Jim</option>
</select>

jQuery:

$('input:button[name=save]').click(function() {
    var name = $('iframe[name=select_frame]').contents().find('#select_name').val();
});

ただし、値を読み取ろうとすると、次の JavaScript エラーが表示されます。

オリジンが「http://www.myownsite.com」のフレームが、オリジンが「http://www.othersite.com」のフレームにアクセスするのをブロックしました。プロトコル、ドメイン、およびポートが一致する必要があります。

この問題を回避するには、「http://www.othersite.com」でコンテンツをプロキシし、代わりに「http://www.myownsite.com」でホストします。たとえば、PHP を使用している場合は、file_get_contents()またはcurlなどの方法を使用して、他のサイトからコンテンツを読み取る PHP スクリプトを用意します。

select_local.phpしたがって、次のような内容のスクリプトを自分のサイトに(たとえば、現在のディレクトリに) 作成します。

select_local.php の PHP コンテンツ:

<?php
    $url = "http://www.othersite.com/select.php?" . $_SERVER['QUERY_STRING'];
    $html_select = file_get_contents($url);
    echo $html_select;
?>

また、このローカル (リモートではなく) スクリプトを呼び出すように HTML を変更します。

<iframe name='select_frame' src='select_local.php?initial_name=jim'></iframe>
<input type='button' name='save' value='SAVE'>

これで、ブラウザーは同じドメインから iFrame コンテンツを読み込んでいると認識するはずです。

于 2013-06-23T15:33:13.067 に答える
6 
<iframe id="upload_target" name="upload_target">
    <textarea rows="20" cols="100" name="result" id="result" ></textarea>
    <input type="text" id="txt1" />
</iframe>

JQueryで価値を得ることができます

$(document).ready(function(){
  alert($('#upload_target').contents().find('#result').html());
  alert($('#upload_target').contents().find('#txt1').val());
});

同じドメインリンクでのみ機能する

于 2013-02-21T12:51:32.353 に答える
1

Iframe なし JQuery でこれを行うことができますが、HTML ページ ソースのみが提供され、ダイナミック リンクや HTML タグは表示されません。PHPソリューションとほぼ同じですが、JQueryで:)コード---

var purl = "http://www.othersite.com";
$.getJSON('http://whateverorigin.org/get?url=' +
    encodeURIComponent(purl) + '&callback=?',
    function (data) {
    $('#viewer').html(data.contents);
});
于 2016-02-26T08:00:23.537 に答える