web-dev-qa-db-ja.com

iframe内の入力フィールドの値を取得します

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

javascripthtmlhtml5iframe
19
Muhammad Talha Akbar

はい、サイトが別のドメインからのものであっても可能です。

たとえば、私のサイトの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エラーが表示されます。

Origin " http://www.myownsite.com "でフレームをブロックし、Origin " http://www.othersite.comでフレームにアクセスできない "。プロトコル、ドメイン、およびポートは一致する必要があります。

この問題を回避するには、自分のサイトのスクリプトから間接的にiFrameを入手し、次のようなメソッドを使用して他のサイトのコンテンツを読み取らせることができるようですfile_get_contents()またはcurlなど。

したがって、次のような内容のスクリプト（たとえば、現在のディレクトリに_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コンテンツをロードしていると考えるはずです。

28
Stefan
<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());
});

同じドメインリンクでのみ動作する

4
Harshit Tailor
document.getElementById("idframe").contentWindow.document.getElementById("idelement").value;
3
Mahdi Dhifi

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);
});
1
Manish Shukla