Question

我正在尝试使用网站填充iframe，具体取决于点击的链接。

我查看了一堆堆栈溢出帖但无济于事。

我附上了我所写的内容片段，任何想法在这里出了什么问题？

＆＃13;

var $navbarLinks = $(".flex-nav .nostyle li a"),
  $iframe = $(".content iframe");

$navbarLinks.on("click", function(e) {
  e.preventDefault();

  var $this = $(this),
    href = $this.attr("href");

  $iframe.contents().find('html').append(href);

  return false;
});

＆＃13;

*,
*::before,
*::after {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
}
.container .flex-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 200px;
  -ms-flex: 1 1 200px;
  flex: 1 1 200px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-right: 1px solid #333;
  background: ghostwhite;
  margin-right: 10px;
}
.container .flex-nav img {
  width: 100%;
  height: auto;
}
.container .flex-nav ul.nostyle {
  list-style-type: none;
}
.container .flex-nav ul.nostyle li {
  display: block;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}
.container .flex-nav ul.nostyle li:not(:last-child) {
  padding-bottom: 10px;
}
.container .flex-nav ul.nostyle li:after {
  content: " >>";
}
.container .flex-nav ul.nostyle li a {
  text-decoration: none;
  color: #333;
}
.container .flex-nav p.muted {
  font-size: 16px;
  font-weight: 600;
  color: #ccc;
  text-align: center;
  padding-bottom: 10px;
}
.container .content {
  -webkit-box-flex: 9;
  -webkit-flex: 9 1 100%;
  -ms-flex: 9 1 100%;
  flex: 9 1 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 10px;
}
.container .content iframe {
  display: block;
  width: 100%;
  height: 80vh;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">

  <nav class="flex-nav">
    <img src="http://lorempixel.com/100/50" alt="" />
    <ul class="nostyle">
      <li><a href="[INSERT A LINK HERE]">click me!</a>
      </li>
      <li><a href="[INSERT A LINK HERE]">click me!</a>
      </li>
      <li><a href="[INSERT A LINK HERE]">click me!</a>
      </li>
      <li><a href="[INSERT A LINK HERE]">click me!</a>
    </ul>
    <p class="muted">Copyright here</p>
  </nav>

  <section class="content">

    <iframe style="border:5px ridge blue">

  </section>

</section>

＆＃13;

我在控制台中没有出现任何错误，当时我正在尝试注入我自己的网站，相反，它只是将我的网站加载到新选项卡中，忽略了jquery中的所有on click事件，甚至虽然我使用正确的语法和名称......

Answer 1

编辑：实际上，它看起来就像你没有关闭你的iframe标签。这样做并修改此行

$iframe.contents().find('html').append(href);

到这一行

$iframe.attr("src", href);

应该修复它。糟糕！

在我的测试中，似乎iframe阻止了之后加载任何javascript。尝试将这个js放在iframe之前：

$(document).ready(function() {
    var $navbarLinks = $(".flex-nav .nostyle li a");

    $navbarLinks.on("click", function(e) {
        var $iframe = $(".content iframe");
        var href = $(this).attr("href");

        $iframe.attr("src", href);

        return false;
    });
});

iframe内容注入失败？

1 个答案: