4

これは完全に正常に機能します。

<script type="text/javascript">
   $(document).ready(function() { 
       $.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
   });
</script>

つまり、FancyBoxが開いてCNNホームページが表示されます。ただし、href属性を「#pg」に変更すると

ページを次のようにコーディングします。

 <body>

    <div id="pg"></div>

    <script type="text/javascript">
     document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title></head><body>test me now</body></html>";
    </script>
</body>

FancyBoxは開きますが、テキストは表示されません。（テキスト「textmenow」は#pgdiv要素に表示されます。ページの最後にあるDIVのinnerHTMLに割り当てられていることに注意してください。）

基本的に、DIVのinnerHTMLプロパティを動的に初期化し、それをFancyBoxタイプのiFrameとして表示する方法があるかどうかを知りたいですか？（iFrameのコンテンツには、iFrameのドキュメントを印刷するボタンがあります。）

TIA

更新：2012年7月28日

@arttronicsが提案したように、私はjsFiddleをまとめました

要約すると、最終的な目的は、別のウィンドウを開かずにFancyBoxのコンテンツ全体を印刷するFancyBox内に含まれるボタンをクリックできるようにすることです。（Javascriptで解析されたコンテンツのレポートビューアーとしてFancyBoxを使用したい。）

FancyBoxのiframeプレーヤーを使用してコンテンツを表示する必要があると思いますが、間違っている可能性があります。

jsFiddleは次のことを示しています。

FancyBoxは、インラインプレーヤーを使用してHTMLページとして検証されるテキストを表示できます。テキストは、hrefまたはを介して参照できますcontent。

ただし、プレーヤーがでiframeあり、コンテンツがからのものhrefである場合、FancyBoxコンテナは空です。内容がcontent属性からのものである場合、FancyBoxは404エラーを表示します。

jsFiddleコードにコメントを付けたり、コメントを外したりするだけで、意味がわかります。

私が自分の目的をどのように達成できるかについてのアイデアは高く評価され、賛成票を獲得します！

TIA。

更新：2012年7月31日

この新しいjsFiddleの例：Iframeレポートビューアは機能しますが、FancyBoxでは機能しません

iframeご覧のとおり、FancyBoxにを表示する方法をいくつか試しました。また、FancyBoxはの内容を表示しますがiframe、印刷機能は機能しません。

この問題を解決する1つの方法は、myContent変数のコンテンツをロード後にFancyBoxに書き込むことだと思いますが、（A）書き込む適切なDOMノードが見つからず、（B）できません。 t FancyBoxにiframe、iframeプレーヤーを使用してを表示させるiframe src="about:blank"。

助言がありますか？または、jsFiddleの例を修正する方法がわかりますか？

4

2 に答える 2

5

<iframe src="#myID"></iframe>idを持つ要素がmyIDiframeに開かれることを本当に期待していますか？

fancyBoxのコンテンツを印刷する場合は、印刷ボタンを追加できます-http: //jsfiddle.net/s3jRA/

更新されたデモ-http://jsfiddle.net/qVrLr/-iframeのコンテンツを作成および更新するため

于 2012-07-31T11:59:53.573 に答える
0

よくあることですが、私は物事を後ろ向きに見ていました。解決策（注意事項あり）は、iframeプレーヤーを使用してdiv要素を表示するのではなく、htmlでiframeを非表示にし、インラインプレーヤーを使用して表示することです。

この作業例を参照してください：jsFiddle

これにより、別のウィンドウを開かなくても動的コンテンツを印刷できるという問題が解決されます。さらに、テキストがFancyBoxにあふれた場合でも、コンテンツ全体が印刷されます。（これは、FancyBoxを印刷し、さまざまなページ要素の表示スタイルを非表示に変更したときに発生しなかったことです）。

主な警告

私はこれをIE8でテストしましたが、動作しますが、それでもChromeで動作させることはできません。

このアプローチを試してみた理由の1つは、動的なページコンテンツに@media印刷スタイルを含めることができるという私の仮定でした。その手法は、何らかの理由で（とにかくIEでは）機能しません。ただし、インラインスタイルはHTMLマークアップタグと同じように機能します（<strong>jsFiddleの例のタグ：var myContentに注意してください）。だから何かがおかしい。

于 2012-07-29T13:07:36.540 に答える