碼上快樂
1秒登錄
首頁
榜單
標簽
關於
搜索
相關內容
簡體
繁體
vue 使用
嵌入網頁 地址實現動態配置</a></h3> </center> <div class="postinfo"> 本文轉載自 <i class="icon-globe"></i>&nbsp;<a href="/go/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vbWFsbmcvcC8xMTQ0ODAzNy5odG1s" target="_blank">查看原文</a> <i class="icon-time"></i>&nbsp;<span>2019-09-02 18:05</span> <i class="icon-eye-open"></i>&nbsp;<span>5242&nbsp;</span> <i class="icon-tag"></i>&nbsp; <span><a href='/tag/VUE' target="_blank">VUE</a></span> <i class="icon-star" title="16.1431"></i> <i class="icon-star" title="16.1431"></i> <i class="icon-star" title="16.1431"></i> <i class="icon-star" title="16.1431"></i> <i class="icon-star" title="16.1431"></i> </div> <hr/> <div class="media-body" id="content_div"> <div class="title_down_ad ad"> </div> <div class="post_content" id="postContent"> <div class="cnblogs_code"> <pre>&lt;template&gt; &lt;div id="app"&gt; &lt;<span style="color: #000000;">iframe style</span>="border:none"<span style="color: #000000;"> :width</span>="searchTableWidth"<span style="color: #000000;"> :height</span>="searchTableHeight"<span style="color: #000000;"> v</span>-bind:src="reportUrl" &gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt;<span style="color: #000000;"> import Vue from </span>'vue'<span style="color: #000000;"> export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> { methods: {</span><span style="color: #000000;"> widthHeight() { </span><span style="color: #0000ff;">this</span>.searchTableHeight = window.innerHeight -146<span style="color: #000000;">; </span><span style="color: #0000ff;">this</span>.searchTableWidth = window.innerWidth - 280<span style="color: #000000;"> }, }, data() { </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> { reportUrl: </span>''<span style="color: #000000;">,</span><span style="color: #000000;"> searchTableHeight: </span>0<span style="color: #000000;">, searchTableWidth: </span>0<span style="color: #000000;"> } }, mounted() { window.onresize </span>= () =&gt;<span style="color: #000000;"> { </span><span style="color: #0000ff;">this</span>.widthHeight(); <span style="color: #008000;">//</span><span style="color: #008000;"> 自適應高寬度</span> <span style="color: #000000;"> }; </span><span style="color: #0000ff;">this</span>.$nextTick(<span style="color: #0000ff;">function</span><span style="color: #000000;"> () { </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.widthHeight(); }); }, created() { </span><span style="color: #008000;">//</span><span style="color: #008000;"> 從路由里動態獲取 url地址 具體地址看libs下util.js里的 backendMenuToRoute 方法 </span> <span style="color: #0000ff;">this</span>.reportUrl = <span style="color: #0000ff;">this</span><span style="color: #000000;">.$route.meta.pathUrl }, watch: { </span>'$route': <span style="color: #0000ff;">function</span><span style="color: #000000;"> () { </span><span style="color: #008000;">//</span><span style="color: #008000;"> 監聽路由變化</span> <span style="color: #0000ff;">this</span>.reportUrl = <span style="color: #0000ff;">this</span><span style="color: #000000;">.$route.meta.pathUrl } } } </span>&lt;/script&gt;</pre> </div> <pre><span style="color: #ff0000;">reportUrl ：要嵌入的網頁地址 根據業務需求填寫。<br><span style="color: #000000;">配置動態地址 ：<br><img src="/image/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM5NTI1Mi8yMDE5MDkvMTM5NTI1Mi0yMDE5MDkwMjE4MTEzNzc5My0xMDkzNzI5Nzg3LnBuZw==.png" alt="" referrerpolicy="no-referrer"><br><br><span style="color: #ff0000;"><span style="color: #000000;">效果圖：</span></span></span></span></pre> <pre><em id="__mceDel"><span style="color: #ff0000;"><span style="color: #000000;"><img src="/image/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM5NTI1Mi8yMDE5MDkvMTM5NTI1Mi0yMDE5MDkwMjE4MDkzMDk2Mi0xODQ1ODM5MzUyLnBuZw==.png" alt="" referrerpolicy="no-referrer"></span></span></em></pre> <p>&nbsp;</p> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4353345653789615" data-ad-slot="4890554435"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> <pre></pre> <p>&nbsp;</p> <pre><span style="color: #ff0000;"><span style="color: #000000;">&nbsp;</span></span></pre> <p>&nbsp;</p> <pre></pre> <p>&nbsp;</p> <pre><span style="color: #ff0000;"><span style="color: #000000;">&nbsp;</span></span></pre> </div> <div class="read-more" id="read-more" style="display:none"></div> <div class="alert alert-info" style="margin-top:20px;"> <p id="tips_top1"> </p> </div> <script type="text/javascript"> $("#tips_top1").append("<strong><i class=\"icon-fire\"></i>溫馨提示：</strong>如果本文未解決您的問題，可以免費向大模型提問：<strong><a href='javascript:void(0)' class='gptbtn'>向AI大模型提問</a></strong>。"); </script> <div class="iframe-container"> </div> </div> <div class="ad_content_down ad"> </div> </div> <div class="disclaimer visible-desktop"> <br/> <div class="alert alert-block"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>免責聲明！</h4> <p>本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。</p> </div> <br/><br/> </div> </div> <!-- 右邊相關博客和資料 --> <div class="span4 left_content"> <div id="left_list_div" class="left_content"> <span class="list-group-item" href="javascript:void(0)"><i class="icon-filter"></i><strong>猜您在找</strong></span> <a class='list-group-item' href="/blog/d47df61.html" title="在Power BI中動態嵌入網頁"> <i class="icon-file"></i> 在Power BI中動態嵌入網頁 </a> <a class='list-group-item' href="/blog/c6e97f1.html" title="將微信公眾號的文章通過iframe嵌入網頁"> <i class="icon-fire"></i> 將微信公眾號的文章通過iframe嵌入網頁 </a> <a class='list-group-item' href="/blog/a11be61.html" title="WPF使用CefSharp嵌入網頁"> <i class="icon-file"></i> WPF使用CefSharp嵌入網頁 </a> <a class='list-group-item' href="/blog/7ce2311.html" title="iframe引入網頁"> <i class="icon-file"></i> iframe引入網頁 </a> <a class='list-group-item' href="/blog/ce924d1.html" title="WinForm嵌入網頁"> <i class="icon-file"></i> WinForm嵌入網頁 </a> <a class='list-group-item' href="/blog/8a67881.html" title="最新動態：開源項目 ionic3-awesome — 實現iframe嵌入外部網頁"> <i class="icon-file"></i> 最新動態：開源項目 ionic3-awesome — 實現iframe嵌入外部網頁 </a> <a class='list-group-item' href="/blog/5db83a1.html" title="VLC嵌入網頁，終於要成功了！"> <i class="icon-file"></i> VLC嵌入網頁，終於要成功了！ </a> <a class='list-group-item' href="/blog/aed9f01.html" title="SVG嵌入網頁的幾種方式"> <i class="icon-fire"></i> SVG嵌入網頁的幾種方式 </a> <a class='list-group-item' href="/blog/94eb591.html" title="在 PowerPoint 2016 中嵌入網頁"> <i class="icon-fire"></i> 在 PowerPoint 2016 中嵌入網頁 </a> <a class='list-group-item' href="/blog/6ca6a91.html" title="WPF 用戶控件嵌入網頁"> <i class="icon-file"></i> WPF 用戶控件嵌入網頁 </a> <div id="right_float_ad" class="ad"> </div> </div> </div> </div> </div> <div class="clear">&nbsp;</div> <div class="fbar" style="z-index:100"> <div class="span7" style="color:grey;font-size:12px;"> </div> <div class="pull-right"> <span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粵ICP備18138465號</a>&nbsp;&nbsp;</span><span>&copy; 2018-2025 CODEPRJ.COM </span> </div> </div> <script src="/js/code.js?version=20250508"></script> <script> function buffer(a, b, c) { var d; return function() { if (d) return; d = setTimeout(function() { a.call(this), d = undefined }, b) } } (function() { function e() { var d = document.body.scrollTop || document.documentElement.scrollTop; d > b ? (a.className = "div1 div2", c && (a.style.top = d - b + "px")) : a.className = "div1" } var a = document.getElementById("float"); if (a == undefined) return ! 1; var b = 0, c, d = a; while (d) b += d.offsetTop, d = d.offsetParent; c = window.ActiveXObject && !window.XMLHttpRequest; if (!c || !0) window.onscroll = buffer(e, 50, this) })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?c81b3b98809d882ddda9a802d3778cf4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>
