Question

我是Angular的新手，我可能会因为发布错误而在这里大喊大叫。我已经尝试尝试解决这一问题已有几天了。如果我分别上传到服务器并查看，我的代码将在App.component.html中工作。生成产品时，从索引页面收到“ TypeError：$ myIframe.load不是函数”错误。

frameresize.js脚本被识别，angular生成script.js，所以我确定它正在被编译。

好，我们走...

这是生成的script.js代码，

var $myIframe = $('#myIframe');

$myIframe.load(function() {
  setIframeHeight();
});

function setIframeHeight() {
  $myIframe.height('auto');
  var newHeight = $('html', $myIframe[0].contentDocument).height();
  $myIframe.height(newHeight);
}

这是我的app.component.html

<div class="box c">
   <div class="h_iframe">
      <!-- a transparent image is preferable -->
       <img class="ratio" src="/angular/my-sassy-scss/images/wolf.jpg"/>
       <iframe id="myIframe" name="iframe_a" src="" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>

  <div  class="box d"> 
    <a class="link" href="/angular/newhtml/" target="iframe_a">App 6</a>
  </div>

newhtml.html代码（放置在标题中）从另一个目录加载页面。

 <style>
  body {
    height: 1000px;
  }
 </style>

Index.html代码，通过框架加载app.component。

    <body>
  <app-root></app-root>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- frameresize script works with jq 2.0.3 and I have moved this all over the place getting different errors--> 
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


</body>

如果我更改

$myIframe.load(function() to this, $($myIframe).on( load, (function()

我得到的负载不是函数错误。

这是我的演示页面。 APP 6链接应该调整框架大小，

Demo page

在Angular 6中调整框架元素的大小

0 个答案: