如何防止我的bootstrap模式中加载的html影响我的页面html？

I am loading a full html email (with opening and closing html tags) into my modal for previewing purposes. Like this:

我正在将一个完整的HTML电子邮件(带有打开和关闭的html标签)加载到我的模态中以进行预览。像这样:

//Update modal body
$('.modal-body').html(response['html']);

The issue I'm having is that when I do this, the html loaded seemed to (unsurprisingly) change the main page content outside of the modal.

我遇到的问题是,当我这样做时,加载的html似乎(不出所料)改变了模态之外的主页面内容。

What I'm wondering is whether there is a way to isolate the html to just the modal area so that it doesn't affect the main page's html.

我想知道的是,是否有办法将html隔离到模态区域,这样它就不会影响主页面的html。

I've looked into using an iframe for this as an alternative, but the problem for me is that I am loading in this data via ajax (along with other data) and iframe's only seem to support pulling in information via links on the fly.

我已经考虑使用iframe作为替代方案,但问题是我通过ajax(以及其他数据)加载此数据,iframe似乎只支持通过链接动态提取信息。

I would appreciate any potential solutions here.

我很感激这里的任何潜在解决方案。

Thanks!

2 个解决方案

#1

Tapha:

Instead of Jquery, you can try the following code:

您可以尝试以下代码而不是Jquery:

<div> 
    <object type="text/html" data="http://www.google.com/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
    </object>
 </div>

Hope this helps!

希望这可以帮助!

#2

These might not function here due to whatever sandboxing that is in place but, this works for me locally.

这些可能在这里不起作用,因为有任何沙盒,但这对我在本地起作用。

var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;

targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();

<iframe id="target"></iframe>

As does:

var target = document.getElementById('target');
target.src = "javascript:'<html><body>Hello world</body></html>'";

<iframe id="target"></iframe>

Though I recognize the second example could be awkward to manage quote wise.

虽然我认识到第二个例子可能很难管理报价。

Here is a full working bootstrap example. Well it works locally, but again, not in this sandbox.

这是一个完整的工作引导示例。它在本地工作,但同样,不在这个沙箱中。

var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;

targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">


        <iframe id="target"></iframe>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Though it fails in the sandbox it render like this locally...

虽然它在沙盒中失败但它在本地渲染...

#1