frame頁面在點擊瀏覽器后退功能后,直接空白,體驗不佳!
------處理方案如下------
在對應的JSP頁面中直接加上:
$(document).ready(function($) {
if (window.history && window.history.pushState)
{
$(window).on('popstate', function ()
{
var hashLocation=location.hash;
var hashSplit=hashLocation.split("#!/");
var hashName=hashSplit[1];
if (hashName !=='')
{
var hash=window.location.hash;
if (hash==='')
{
//在瀏覽器點擊后退時,固定在當前頁
window.history.pushState('forward', null, '');
return;
}
}
});
window.history.pushState('forward', null, '');
}
});
2年之前碰到的處理方案,希望對大家有用。
最近網站新增了一個域名B用于分離不同的功能。但是需要復用服務器的高防等服務,但是服務和原有域名A綁定,所以新域名B需要直接去調用域名A。
一開始想使用CNAME的方式,讓B直接指向A。但是Https支持性有點問題,需要多域名證書。也考慮過反向代理,但是代理服務器的性能和高防等又是一個問題。
最終決定在域名B的網頁中,所有請求都直接去調用域名A的接口。于是就遇到了跨域請求的問題。
網上找了許多資料來實現跨域請求。最終預估下來,有兩種方案比較靠譜:通過iframe實現和CORS方案
初步設想是加載一個域名A的iframe頁面,然后通過postMessage將所有Ajax請求,轉發給這個頁面,通過這個頁面來進行請求,最終將結果通過postMessage回發給外層的域名B頁面。
于是開始實現:
前端使用的是React,所以實現了一個FrameHttp.js專門用法封裝ajax調用。調用FrameHttp.ajax將所有外部Jquery請求轉發給iframe中域名A的/util/ajaxrequest頁面。
import Tools from "../Tools"
const FrameHttpCmd={
INIT: 1,
REQUEST: 2,
REQUEST_CALLBACK: 3,
}
class FrameHttp {
static isInit=false
static _request_buffer=[]
static frame=null
static message_key=0
static message_key_max=10000000
static request_map={}
static init(domain) {
var the_frame=document.createElement('iframe')
let url_obj=new URL(domain)
url_obj.pathname=Tools.getUrl('/util/ajaxrequest')
the_frame.src=url_obj.toString()
the_frame.style.visibility='hidden'
the_frame.style.position='absolute'
the_frame.style.width=0
the_frame.style.height=0
FrameHttp.frame=the_frame
document.body.appendChild(the_frame)
window.addEventListener('message', this.onMessage)
}
static _initFrame() {
FrameHttp.isInit=true
console.log('(INFO)FrameHttp._initFrame')
for (let i=0; i < FrameHttp._request_buffer.length; i++) {
let arg=FrameHttp._request_buffer[i]
FrameHttp.ajax(arg)
}
FrameHttp._request_buffer=[]
}
static getMessageKey() {
let message_key=FrameHttp.message_key
FrameHttp.message_key=(FrameHttp.message_key+1)%FrameHttp.message_key_max
return message_key
}
static ajax(arg) {
if (FrameHttp.isInit) {
// console.log(arg)
const { success, error, ...others }=arg
let message_key=FrameHttp.getMessageKey()
FrameHttp.request_map[message_key]={ success, error }
FrameHttp.frame.contentWindow.postMessage({
cmd: FrameHttpCmd.REQUEST,
data: others,
key: message_key,
}, '*')
console.log('(INFO)FrameHttp.ajax', others)
}
else {
FrameHttp._request_buffer.push(arg)
console.log('(INFO)FrameHttp.ajax:push buffer')
}
}
static onMessage(e) {
const { data }=e
if (data.cmd==FrameHttpCmd.INIT) {
FrameHttp._initFrame()
}
else if (data.cmd==FrameHttpCmd.REQUEST_CALLBACK) {
// console.log(data.key, data.success)
let item=FrameHttp.request_map[data.key]
if (data.error) {
if (item.error) {
item.error(data.error)
}
}
else {
if (item.success) {
item.success(data.success)
}
}
delete FrameHttp.request_map[data.key]
}
}
}
export default FrameHttp
export { FrameHttpCmd }
然后域名A中的/util/ajaxrequest頁面處理請求:
import React, { Component } from 'react'
import { FrameHttpCmd } from '../../../common_js/web_frame/FrameHttp'
import jquery from '../../../common_js/jquery.min'
class AjaxRequest extends Component {
constructor(props) {
super(props)
this.onMessage=this.onMessage.bind(this)
}
onMessage(e) {
const { cmd, data, key, cookie }=e.data
if (cmd==FrameHttpCmd.REQUEST) {
// console.log(key, data)
console.log(document.cookie)
jquery.ajax({
...data,
success: (data)=>{
window.parent.postMessage({
cmd: FrameHttpCmd.REQUEST_CALLBACK,
key,
success: data,
}, '*')
},
error: ()=>{
window.parent.postMessage({
cmd: FrameHttpCmd.REQUEST_CALLBACK,
key,
error: 'error',
}, '*')
},
})
}
}
componentDidMount() {
window.parent.postMessage({
cmd: FrameHttpCmd.INIT,
}, '*')
window.addEventListener('message', this.onMessage)
}
render() {
return null
}
}
export default AjaxRequest
如此實現后,發現iframe因為跨域問題無法加載
因為后端是由Django實現的,經過查閱發現,在views中需要進行處理,添加xframe_options_exempt裝飾器,實現跨域加載iframe。
@xframe_options_exempt
def indexCross(request, *args, **kwargs):
return render(request, 'index.html', {})
功能能夠正常請求,但是請求中cookie并沒有正常傳送。
經過排查發現,對于跨域的iframe,google瀏覽器默認對于cookie中SameSite這個參數是LAX,會導致只有同源才能設置服務器返回的Set-Cookie。所以需要將服務器返回的Set-Cookie中指定SameSite為None,這樣前端才能成功設置Cookie。
于是服務端Django引入了中間件django-cookies-samesite。settings.py進行如下修改:
INSTALLED_APPS=[
...
'corsheaders',
...
]
# 中間件request按照注冊順序順序執行,response按照注冊順序倒序執行
MIDDLEWARE=[
'django_cookies_samesite.middleware.CookiesSameSite', # 此處response需要最后執行
...
]
SESSION_COOKIE_SECURE=True
SESSION_COOKIE_SAMESITE='None'
至此實現了iframe方式跨域。
這個需要前端Jquery加入兩個參數:
jquery.ajax({
...
xhrFields: {
withCredentials: true
},
crossDomain: true,
})
然后服務端需要開啟跨域請求支持。Django下引入中間件django-cors-headers。settings.py下如下設置:
MIDDLEWARE=[
...
'corsheaders.middleware.CorsMiddleware', # 這個位置越高越好,至少要高于CommonMiddleware
...
]
# 跨域配置
CORS_ALLOW_CREDENTIALS=True
# CORS_ORIGIN_ALLOW_ALL=True
CORS_ORIGIN_WHITELIST=[
'https://www.xxx.com',# 域名B
]
CORS_ALLOW_METHODS=[
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
]
CORS_ALLOW_HEADERS=[
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
'cache-control',
]
此方案也需要和iframe一樣,解決cookie中SameSite的問題。
至此CORS方案跨域也實現了。
最近在項目中遇到了一個需要動態添加 select option 選項的問題,大概功能就是iframe不同子頁面之間,將iframe3選中的checkbox內容作為iframe4中一個select下拉框的選項。上網查閱資料后發現有js實現的,也有jquery實現的,根據自己的要求我"添加"采用js方式實現,"刪除"采用jquery方式實現(js也可以實現刪除,是根據選中內容的索引下標實現的),根據自己的實際需求我選擇了jquery,其中有個方法是根據value值刪除的。
1.js動態添加option
2.jquery 動態刪除option
根據value值刪除option
3.js動態刪除option
根據下標索引刪除option
4.js刪除所有option
刪除所有option
上面提及到了iframe,實際項目中獲取select元素id不是這么簡單,這里是簡化了只是為了說明添加和刪除option。下面總結下常見的幾種iframe子頁面與子頁面以及子頁面與父頁面之間如何取值,希望可以幫助跟我之前一樣取不到值而困惑的朋友哈。這里假設有irame1和iframe2子頁面。
1.父頁面獲取子頁面的值
2.子頁面獲取父頁面的值,并賦值(子頁面操作父頁面)
3.兩個子頁面相互操作(iframe1操作iframe2)
以上都是js獲取的方法,還有jquery的方式,方法不一樣,基礎原理都是一樣的,父頁面可以拿到子頁面的值,子頁面之間不能之間取值,子頁面要先通過父頁面元素拿到其他子頁面iframe Id,再去訪問其他子頁面的元素。
jquery不同ifame之間取值
哪里寫的不妥的地方,歡迎大家在評論提出你的意見或建議哈。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。