0

アクティブな X コントロールを含む HTML ページがあります。html コードは次のとおりです。

<div class="esv">
    <h2>John 3:16 <object class="audio" data=
    "http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016" height="12"
    type="application/x-shockwave-flash" width="40">
        <param name="movie" value=
        "http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016">
        <param name="wmode" value="transparent">
    </object></h2>

    <div class="esv-text">
        <h3 id="p43003016.01-1">For God So Loved the World</h3>

        <p id="p43003016.07-1"><span class="verse-num woc" id=
        "v43003016-1">16&nbsp;</span><span class="woc">“For God so loved the
        world,<span class="footnote">&nbsp; <a href="#f1" id="b1" title=
        "Or 'For this is how God loved the world'">[1]</a></span> that he gave
        his only Son, that whoever believes in him should not perish but have
        eternal life.</span> (<a class="copyright" href=
        "http://www.esv.org">ESV</a>)</p>
    </div>

    <div class="footnotes">
        <h3>Footnotes</h3>

        <p><span class="footnote"><a href="#b1" id="f1">[1]</a></span>
        <span class="footnote-ref">3:16</span> Or <em>For this is how God loved
        the world</em></p>
    </div>
</div>

画像のようなダイアログに表示したい： テスト

そのため、jquery-ui を選択して実装します。コード：

 $('#btn1').click(myFunction);
 $('#res1').dialog({
     autoOpen: true,
     resizable: false,
     position: 'center',
     stack: true,
     height: 'auto',
     width: 'auto',
     modal: true
 });

 function myFunction() {
     var s = "<div class="esv"><h2>John 3:16 <object type="application/x-shockwave-flash"  data="http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016" width="40" height="12" class="audio"><param name="movie" value="http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016" /><param name="wmode" value="transparent" /></object></h2>
  <div class="esv-text"><h3 id="p43003016.01-1">For God So Loved the World</h3>
  <p id="p43003016.07-1"><span class="verse-num woc" id="v43003016-1">16&nbsp;</span><span class="woc">&#8220;For God so loved the world,<span class="footnote">&nbsp;<a href="#f1" id="b1" title="Or 'For this is how God loved the world'">[1]</a></span> that he gave his only Son, that whoever believes in him should not perish but have eternal life.</span>  (<a href="http://www.esv.org" class="copyright">ESV</a>)</p>
    </div>
    <div class="footnotes">
    <h3>Footnotes</h3>
    <p><span class="footnote"><a href="#b1" id="f1">[1]</a></span> <span class="footnote-ref">3:16</span> Or <em>For this is how God loved the world</em>
   </p>
   </div>
 </div>";
     $('#res1').html(s).dialog('open');
 }

機能していません。デモはjsfiddle にあります。

4

2 に答える 2

1

ダイアログに渡された html が有効であること、つまり引用符が互いに衝突していないことを確認したいと考えています。原則として次のようになります。

 $('#btn1').click(myFunction);
 $('#res1').dialog({
     autoOpen: true,
     resizable: false,
     position: 'center',
     stack: true,
     height: 'auto',
     width: 'auto',
     modal: true
 });

 function myFunction() {
     var htmlString = 'foo';
     $('#res1').html(htmlString).dialog('open');
 }

実際の例については、このjsFiddleを参照してください。

于 2013-07-01T17:24:55.150 に答える