angular-使用iframe做獨立頁(iframe傳值到angular和iframe里請求后台數據)


這個方法使用過兩次。一次是在項目中嵌入一個表達式生成器。因為用別人做好的網頁變成組件很難,而且里面用了jq,與angular思想相反不能用。另一次是因為想要單獨引用樣式。而innerHTML使用的樣式放在組件css里不生效。放在assets里又影響全局樣式。所以使用iframe。

第一種是在iframe頁中獲取我需要的值傳回angular頁。另一種是將后台請求參數傳向iframe頁。在iframe引用的頁中請求並返回后台數據用innerHTML展示。

兩種都先鏈接到iframe並傳參。首先iframe引用的網頁要放在assets資源文件夾里。才能夠通過路徑訪問。首先把要引用網站的html,css放在資源文件夾里。

其次,在angular組件中用路徑鏈接到網頁。並根據需要傳參數。angular中默認這路徑是不安全的。我們需要DomSanitizer告訴它這是個安全路徑。如果沒使用會報一個提示不安全路徑錯吧。現在錯誤我懶得重現。注意的是用innerHTML引用樣式時也用類似的方法。直接截圖方法。

ts文件方法

HTML里的 寫法:

這樣鏈接已經完成了。鏈接的頁要接受參數是怎么做呢,直接上代碼,粘貼這串代碼就可以獲取傳過來的所有參數,拿到對應參數格式是Request['參數名']

function request(url) {
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}

var Request = new Object();
Request = request();
alert(Request['url'], Request['token'], Request['queuename']); //拿到對應的參數Request['參數名'](這里和上面的傳參是兩個頁。不對應)
 
 第一種:從iframe頁里傳數據到angular頁。
 
 

 第二種:

拿到參數后請求后台數據,並使angular里的父容器自適應iframe里網頁長度的方法是


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM