Question

我为客户建立了一个网站，我有一个脚本，在移动视图中将侧边栏div移动到主要内容下方。此脚本加载在页脚中：

// Move Global nav to top for mobile
$(window).on("resize", function() {
var windowSize = $(window).innerWidth();
    if(windowSize > 767){

        $(".utility-nav").insertBefore($(".global-nav"));
        $(".sidebar-secondary").insertAfter($(".subnav"));

    } else {

        $(".global-nav").insertBefore($(".utility-nav"));
        $(".sidebar-secondary").insertAfter($(".content-main"));

    }
}).resize();

他们正在添加第三方日历，要求他们插入包含内联脚本的代码段。当这些被放置在移动的.sidebar-secondary div中时，内容会消失。我认为，由于我的脚本在启动后运行，它们将被取消。

有没有办法让我的脚本重新运行该div中的任何内联脚本？

以下是他们正在测试的页面： http://www.umary.edu/sandbox-training/index.php

左侧边栏中的脚本是出现故障的脚本。

谢谢！

Answer 1

您可以检索div中的所有脚本标记，并eval检索其中的文本

$('#run').click(function(){
	$('#someSideBar').find('script').each(function(){
  	  eval( $(this).text() ); 
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someSideBar">
  <script type="text/javascript">
  	alert('hello');
  </script>
  <script type="text/javascript">
  	alert('there');
  </script>
</div>
<input type="button" id="run" value="Run">

**在继续之前，你应该研究这个问题的安全隐患。

Answer 2

您的内容消失的原因是，当您的内容与DOM分离时，保存您内容的<iframe> 已卸载，并且在附加内容时已加载再次访问DOM。由于所讨论的<iframe>似乎是由脚本生成的，因此第二次加载会生成一个空文档。查看此simple DOM test-case以查看加载/卸载行为。据我所知，没有办法在DOM中移动iframe，以致禁止这种行为。

您明确要求这样做，但只是重新运行内联<script>可能无法产生您希望的结果，除非这些脚本（意外地或有目的地）以允许此方式的方式编写。非常小心这种东西。如果只有一个document.write()，您的整个文档将被覆盖。这通常不是您想要传递给第三方脚本的那种破坏力。

您可以尝试使用Flexbox和order属性重新排列内容，因此内容会在CSS中移动而不是DOM。
您可以尝试重新排列其他内容，使您无需在DOM中移动.sidebar-secondary。您可能需要将辅助内容块拆分为单独的<div role="complimentary">（顺便说一下，<nav>的用途）。完成后，您可以在#content-start。

.sidebar-secondary

在外部脚本函数结束时重新运行内联脚本

2 个答案: