2010年7月23日金曜日

inline表示したブラウザでjavascriptを動作させる

別ウィンドウにPDF等の帳票をinlineでを出力することはよくあるが、その場合inlineで表示した別ウィンドウではjavascriptが動作しなくなる。
前回エントリの子ウィンドウを閉じる制御などを組み込みたい場合にどうすればよいか。

frameは使いたくないので、色々試行錯誤した結果とりあえずiframeとcssで頑張ることで解決。
ブラウザのbodyいっぱいにiframeを広げて、iframeのリクエストでファイルをダウンロード。
ダウンロードをGETで行わなければならないが、今回はPRGパターンのPOSTでファイル操作してGETでダウンロードという作りなのでOK



function writeOpenWin(win, requestPath) {
 
 // header各種生成
 var docType = 'xxx'; //xhtml定義など
 var htmlTagStart = 'xxx'; // htmlタグ namespaceスペースなど
 var contentTypeCharset = '<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />';
 var contentTypeJs = '<meta http-equiv="Content-Script-Type" content="text/javascript" />';
 var contentTypeCss = '<meta http-equiv="Content-Style-Type" content="text/css" />';
 
 // スタイル生成
 var wincss = '<style type="text/css">';
  wincss += 'html,body{';
  wincss += 'height:100%;';
  wincss += 'margin:0px;';
  wincss += 'padding:0px;';
  wincss += 'overflow: hidden;';   
  wincss += '}';
  wincss += '</style>';  
 
 // javascript生成
 var winJs = '<script type="text/javascript">';
  winJs += "function hogeFunc(){ alert("xxx"); }"; // onloadに登録する処理など
  winJs += '</script>';

 // ドキュメント書き込み
 win.document.open();
 win.document.write(docType);
 win.document.write(htmlTagStart);
 win.document.write('<head>');
 win.document.write('<title>' + dlFileName + '</title>');
 win.document.write(contentTypeCharset + contentTypeJs + contentTypeCss);
 win.document.write(wincss + winJs);
 win.document.write('</head>');
 win.document.write('<body onload="hogeFunc();" >');
 win.document.write('<iframe src="'+ requestPath + '" width="100%" height="100%" scrolling="auto" name="side" frameborder="0" allowtransparency="true"></iframe>');
 win.document.write('</body>');
 win.document.write('<html>');
 win.document.close();
}

使用例
// requestPath生成処理など
 ･･･
 var win = window.open("../dummy.htm" ,"winname", "width=800,height=600");
 writeOpenWin(win, requestPath);
 ･･･


※IE6,7しか確認してないす
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)