Question

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

  var sdegree = 0;
  var sdegree2 = 0;

  $(window).scroll(function() {

    sdegree ++ ;
    sdegree = sdegree + 2 ;

    sdegree2 -- ;
    sdegree2 = sdegree2 - 2 ;

    var srotate = "rotate(" + sdegree + "deg)";
    var srotate2 = "rotate(" + sdegree2 + "deg)";

    $(".move1").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
    $(".move2").css({"-moz-transform" : srotate2, "-webkit-transform" : srotate2});

  });

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

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

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

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

谢谢！

Answer 1

这些可能在这里不起作用，因为没有沙盒，但这对我来说很适合。

＆＃13;

var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;

targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();

＆＃13;

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

＆＃13;

同样如此：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;

targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();

＆＃13;

<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>

＆＃13;

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

Answer 2

Tapha：

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

Test.ts

希望这有帮助！

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

2 个答案: