通过div.load()解析时的Html呈现问题

时间:2014-03-28 12:55:57

标签: javascript jquery html css

我对Javascript和jquery比较新,所以请原谅,如果这可能是愚蠢的。 我正在制作一个可以在浏览器中运行的html内容(文档)阅读器。

<div id="documentContainer">
    <div class="dcIconsListTop" id="annotationIconsDiv"></div>
    <div id="documentContainerScroll" style="padding:0px;width:100%;overflow:auto;margin:0px;"></div>
</div>

并在div.load

中插入实际内容
this.iframe = jQuery('<div id = "documentframe" width="744px" scrolling="no" height="100%" frameborder="0" allowtransparency="yes" src="about:blank"></div>');
jQuery("#iframeContainerScroll").append(this.iframe);
jQuery('#documentframe').load(contentURL, function() {
    jQuery(this).trigger("create");
    //obj.iFrameOnLoad();
});

问题是实际文档没有正确呈现。基本的内联样式显示在浏览器中,但是某些html标记不是在浏览器中预期的那样(尽管标记正在传递给浏览器)

html内容:::

<p><strong>This is bold</strong></p>
<p><strong>&nbsp;</strong></p>
<p><em>this is italic</em><strong> <br></strong></p>
<p><strong>&nbsp;</strong></p>
<p><span style="text-decoration: underline;">This is und<strong><br></strong></span></p>
<p><span style="text-decoration: underline;">&nbsp;</span></p>
<p><span style="text-decoration: underline;">&nbsp;</span></p>
<p>Detailed session recording serves a wide variety of purposes:</p>
<div class="blockquote">
    <blockquote class="blockquote">
        <p>It trains students to recall the details of their interactions with clients-the verbal and nonverbal content that makes up the interaction.</p>
    </blockquote>
</div>
<div class="blockquote">
    <blockquote class="blockquote">
        <p>It trains students to be aware of emotional undertones of the interaction, which will provide clues to the motivational state experienced by the client, and to transference phenomena.</p>
    </blockquote>
</div>
<div class="blockquote">
    <blockquote class="blockquote">
        <p>It encourages students to develop insight into their own emotional reactions to clients and counseling situations (countertransference) so that they will not act out on their feelings without awareness.</p>
    </blockquote>
</div>
<div class="blockquote">
    <blockquote class="blockquote">
        <p>It provides a framework to track the helping process, identify what skills were or were not applied, and clarify the purposes and efficacy of their interventions.</p>
    </blockquote>
</div>
<div class="blockquote">
    <blockquote class="blockquote">
        <p>It develops the ability to communicate insights, thoughts, and feelings in written form.</p>
    </blockquote>
</div>
<div class="blockquote">
    <blockquote class="blockquote">
        <p>It provides a framework for the instructor and student to collaboratively evaluate the training process individually, as the basis for class discussion, in students' casework, or in practicum classes. Students may also refer to recorded material in their theoretical papers, linking it to their practice.</p>
    </blockquote>
</div>
<h2 style="clear: both;" class="title"><a target="_blank" name="ID0EKB"></a></h2>
<p><span style="text-decoration: underline;">&nbsp;</span></p>

请帮助!

另外,如果有人可以建议我采取不同的方式来做到这一点,我真的很感激.. 背景: 1)我开始为实际内容构建一个iframe,因为我想要内容脚本和播放器(内容周围的按钮)脚本混合。但这是一个不好的做法因为我无法控制内部内容html所以增加/减少字体等... 2)所以我正在寻找一种不同的方式来做这件事。有人建议吗?

0 个答案:

没有答案