Help us understand the problem. What is going on with this article?

Javascriptでのiframe操作tips(iframeの中身を差し替える)

More than 1 year has passed since last update.

追記(2016/05/05)

コメントでご指摘いただきました。
過去のソースにアクセス出来ない&Javascriptの知識が浅いので経緯がわからない状態ですが、
iframe elementの取得方法と、iframe内のコンテンツの更新方法を下記のように置き換えないと動かないようです。ご注意ください。

document.getElementById('iframe_id')[0].contentDocument.location.replace('target_url or target_path');



document.getElementById('iframe_id').contentWindow.location.replace('target_url or target_path');

追記ここまで。
以下、2014年に投稿した記事です。


  コンテンツの更新システムを作る場合などに、iframeを使ってプレビューを表示したい
  カレンダーの日付クリックイベントを拾って、iframeの中身を差し替えたい(iframeのURLを差し替えたい)

なんて実装をする時にはまったのでメモ。

iframeを更新(=リロード)する

location.reloadを使います。
reload(true)でスーパーリロードになります。

jQuery

$('#iframe_id')[0].contentDocument.location.reload(true);

素のJavascript

document.getElementById('iframe_id')[0].contentDocument.location.reload(true);

iframeのコンテンツを差し替える(別のURLからコンテンツを取得する)

iframeの中身を差し替えたい場合は、location.srcを書き換えてlocation.reloadしてもダメ。
location.replaceしましょう。

jQuery

$('#iframe_id')[0].contentDocument.location.replace('target_url or target_path');

素のJavascript

document.getElementById('iframe_id')[0].contentDocument.location.replace('target_url or target_path');

Sample

$('#iframe_id')[0].contentDocument.location.replace('/preview/show/20140320');

↑2014/03/20時点のコンテンツプレビューが見たい = previewコントローラのshowアクションに年月日パラメータ(20140320)を引き渡した結果をiframe内に表示する。というイメージ。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away