如何使用 iframe 作为 ngView? [英] How to use an iframe as ngView?

查看：24 发布时间：2021/11/10 3:30:37 angularjs angular-routing
本文介绍了如何使用 iframe 作为 ngView?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述

我有一个名为index.html"的页面它有包含多个链接的左窗格和包含 iframe 的右窗格.
当我点击左窗格中的链接时，页面(不是外部网站或页面)应该在 iframe 中加载.
解决方案
Angular 在 iframe 上支持 ng-src，所以你可以像这样用你的 url 设置 ng-src.

&lt;/iframe&gt;&lt;/div&gt;</code></pre><p>getUrl 在将 url 设置到 iframe 之前对其进行清理.控制器就这么简单.</p><pre><code>$scope.currentUrl = "http://www.youtube.com/embed/Lx7ycjC8qjE";$scope.urls = [{名称:http://www.youtube.com/embed/Lx7ycjC8qjE"},{名称:http://www.youtube.com/embed/mMxQHmvQ1pA"}];$scope.setCurrentUrl = 函数(网址){$scope.currentUrl = url;}$scope.getUrl = function(){控制台日志($scope.currentUrl)；返回 $sce.trustAsResourceUrl($scope.currentUrl);}</code></pre><p>这是一个示例 plnkr.</p><p><a href="http://plnkr.co/edit/EVkyH8LuCXcsWUi1xnvV?p=preview" rel="nofollow">http://plnkr.co/edit/EVkyH8LuCXcsWUi1xnvV?p=preview</a></p><p>I've a page called 'index.html'
it has left pane with multiple links and right pane which contains iframe.</p>

<p>When I click a link from left pane the page(not external sites or pages) should get load inside iframe.</p><div class="h2_lin"> 解决方案 </div><p>Angular supports ng-src on iframe , so you can set ng-src with your url like this.</p><pre><code>&lt;div&gt;&lt;iframe  width="640" height="385" ng-src="{{getUrl()}}"&gt; &lt;/iframe&gt;&lt;/div&gt;
</code></pre><p>The getUrl sanitizes the url before setting it on the iframe. The controller will be as simple as this.</p><pre><code>$scope.currentUrl = "http://www.youtube.com/embed/Lx7ycjC8qjE";

  $scope.urls = [
    {
      name:"http://www.youtube.com/embed/Lx7ycjC8qjE"
    },
    {
      name:"http://www.youtube.com/embed/mMxQHmvQ1pA"
    }];

    $scope.setCurrentUrl = function(url)
    {
      $scope.currentUrl = url;
    }

    $scope.getUrl = function()
    {
      console.log($scope.currentUrl);
       return $sce.trustAsResourceUrl($scope.currentUrl);
    }
</code></pre><p>Here is a sample plnkr.</p>

<p><a href="http://plnkr.co/edit/EVkyH8LuCXcsWUi1xnvV?p=preview" rel="nofollow">http://plnkr.co/edit/EVkyH8LuCXcsWUi1xnvV?p=preview</a></p>

                        <p>这篇关于如何使用 iframe 作为 ngView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2530954');">查看全文</span>
                    </div>
                </div>
				<div>
                            
                        </div>
                <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
            </div>
        </article>
        <div id="arc-ad-2" class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
        <div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
            <h5>相关文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="如何将iframe用作ngView?" href="/1929160.html">
                            如何将iframe用作ngView?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何决定何时使用ngView或ngInclude？" href="/195384.html">
                            如何决定何时使用ngView或ngInclude？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何决定何时使用 ngView 或 ngInclude?" href="/2521961.html">
                            如何决定何时使用 ngView 或 ngInclude?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用iframe作为母版页？" href="/1079088.html">
                            如何使用iframe作为母版页？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用iframe作为链接?" href="/2121273.html">
                            使用iframe作为链接?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用纳克开关，作为我的ngRoute＆功放页面路由器; ngView？" href="/197776.html">
                            如何使用纳克开关，作为我的ngRoute＆功放页面路由器; ngView？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用AJAX作为iframe的替代方案？" href="/892707.html">
                            如何使用AJAX作为iframe的替代方案？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="AngularJS ngAnimate ngView顺利淡出/动画" href="/199361.html">
                            AngularJS ngAnimate ngView顺利淡出/动画;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何理解页面是否作为iframe（外部网站）使用javascript加载？" href="/558310.html">
                            如何理解页面是否作为iframe（外部网站）使用javascript加载？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在ngView指令在ngRepeat动态templateUrl" href="/195707.html">
                            在ngView指令在ngRepeat动态templateUrl;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何隐藏与AngularJS ngView未经授权的用户模板？" href="/198929.html">
                            如何隐藏与AngularJS ngView未经授权的用户模板？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将iframe中的iframe作为目标父级div" href="/869696.html">
                            将iframe中的iframe作为目标父级div;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用iframe更改iframe的src？" href="/1262991.html">
                            如何使用iframe更改iframe的src？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="javascript xhr加载iframe作为回应" href="/892414.html">
                            javascript xhr加载iframe作为回应;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用 $location.path 但没有重新加载 ngView 的 AngularJS 分页" href="/2520831.html">
                            使用 $location.path 但没有重新加载 ngView 的 AngularJS 分页;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="榆木：如何使用iframe" href="/2062507.html">
                            榆木：如何使用iframe;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="内ngView嵌套指令不起作用角JS" href="/195138.html">
                            内ngView嵌套指令不起作用角JS;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将iframe内容作为字符串" href="/892826.html">
                            将iframe内容作为字符串;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在AngularJS，我可以使用当前路由在ngSwitch ngView外" href="/197579.html">
                            在AngularJS，我可以使用当前路由在ngSwitch ngView外;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="强制IFrame中的任何HREF使用其父级作为目标" href="/892343.html">
                            强制IFrame中的任何HREF使用其父级作为目标;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="以编程方式访问使用数据URI作为源的iframe" href="/892531.html">
                            以编程方式访问使用数据URI作为源的iframe;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用JavaScript在iframe中重新加载iframe？" href="/820700.html">
                            如何使用JavaScript在iframe中重新加载iframe？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用jquery从IFrame本身更改IFrame样式？" href="/557946.html">
                            如何使用jquery从IFrame本身更改IFrame样式？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="触发父 iframe 中的单击事件时，如何让 IFRAME 作为父级监听滚动事件" href="/2735590.html">
                            触发父 iframe 中的单击事件时，如何让 IFRAME 作为父级监听滚动事件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用 CORS 访问 iframe" href="/2701076.html">
                            如何使用 CORS 访问 iframe;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
    </div>
    <div class="side">
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>其他开发最新文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="拒绝显示一个框架，因为它将&#39;X-Frame-Options&#39;设置为&#39;sameorigin&#39;" href="/893060.html">
                            拒绝显示一个框架，因为它将&#39;X-Frame-Options&#39;设置为&#39;sameorigin&#39;;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？" href="/303988.html">
                            什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在运行npm install命令时获取&#39;npm WARN弃用&#39;警告" href="/840917.html">
                            在运行npm install命令时获取&#39;npm WARN弃用&#39;警告;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="cmake无法找到openssl" href="/516280.html">
                            cmake无法找到openssl;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件" href="/850628.html">
                            从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Twitter :: Error :: Forbidden  - 无法验证您的凭据" href="/630061.html">
                            Twitter :: Error :: Forbidden  - 无法验证您的凭据;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="我什么时候需要一个fb：app_id或者fb：admins？" href="/747981.html">
                            我什么时候需要一个fb：app_id或者fb：admins？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将.db文件导入R" href="/902960.html">
                            将.db文件导入R;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件" href="/744854.html">
                            npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src&#39;self&#39;”" href="/819167.html">
                            拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src&#39;self&#39;”;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门教程
            </h5>
            <ul>
                <li>
                    <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
                        Java教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
                        Apache ANT 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
                        Kali Linux教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
                        JavaScript教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
                        JavaFx教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
                        MFC 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
                        Apache HTTP客户端教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
                        Microsoft Visio 教程
                    </a>
                </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门工具
            </h5>
            <ul>
                
                <li>
                    <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
                        Java 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
                        C(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
                        PHP 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
                        C# 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
                        Python 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
                        MySQL 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
                        VB.NET 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
                        Lua 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
                        Oracle 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
                        C++(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
                        Go 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
                        Fortran 在线工具
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script type="text/javascript">var eskeys = '如何,使用,iframe,作为,ngview'; var cat = 'cc';';//other-dev</script>
    </div>
<div id="pop" onclick="pophide();">
    <div id="pop_body" onclick="event.stopPropagation();">
        <h6 class="flex flex101">
            登录
            <span onclick="pophide();">关闭</span>
        </h6>
        <div class="pd-1">
            <div class="wxtip center">
                <span>扫码关注<em>1秒</em>登录</span>
            </div>
            <div class="center">
                <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
            </div>
            <div style="margin-top:10px;display:flex;justify-content: center;">
                <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
                <input id="btngo" type="button" onclick="chk()" value="GO" />
            </div>
            <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
                发送“验证码”获取
                <em style="padding: 0 .5rem;">|</em>
                <span style="color: #01a05c;">15天全站免登陆</span>
            </div>
            <div id="chkinfo" class="tip"></div>
        </div>
    </div>
</div>    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
    <div class="container">
		<div class="flink mb-1">
			友情链接：
            <a href="https://www.it1352.com/" target="_blank">IT屋</a>
            <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
            <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
        </div>
        <section class="copyright-section">
            <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
            ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
            <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
            <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
            <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
            <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.
        </section>
        
<!--统计代码-->
<script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
    </div>
</footer>
</body>
</html>