vueネストiframeの一連の問題
20117 ワード
vueネストiframeの一連の問題
最近、プロジェクトで1つのニーズに遭遇した場合、1つのプロジェクトで別のプロジェクトを直接参照する必要があり、さまざまな状況が失敗した後、iframeを選択しました.呼び出し中に発生した問題を共有します.
router.go()の使用
この状況は主にiframeのsrc値を変更した後のルーティングジャンプ混乱に適用されます.
詳細:iframe->srcプロパティを複数回変更するとrouterが呼び出されます.go(-1)は、ルーティングが1段階後退するのではなく、iframeをウィンドウドキュメントとしてウィンドウドキュメントのwindowを呼び出す.history.go(-1)、親プロジェクトのルーティング後退機能は変更されていません.
解決方法:
Iframe->srcのプロパティ値を変更することなく、windowを使用します.location.replace(url)iframeがアクセスする内容を変更します.具体的なコードは次のとおりです.
通信(親ページと子ページが通信)
2つのプロジェクト間で相互に通信し、ドメイン間の問題に関連し、サブページは親ページを直接呼び出すことができず、親ページもサブページを呼び出すことができない方法です.
エラー詳細:Error in created hook:“SecurityError:Blocked a frame with origin“http://*”from accessing a cross-origin frame.”
解決方法:postMessage
window.PostMessage()メソッドは、ソース間通信を安全に実現することができる.このメソッドが呼び出されると、すべてのページ・スクリプトが実行された後、ターゲット・ウィンドウにMessageEventメッセージが送信されます.コードは次のとおりです.
上記の例では、2つの異なるドメインのページ間の通信が実現される.しかし、ここではiframeを動的に変更するために使用しています.contentWindow.locationがアクセスするコンテンツです.ここで親ページがサブページに通信を開始するにはiframeでページのロードが完了した後、サブページが通信データを取得できません.
シーンの適用
子ページで親ページを呼び出す方法や、親ページのデータを使用する必要がある場合は、子ページで親ページに通信を開始したり、親ページにデータを転送したりすることができます.
注意事項
postMessageはオブジェクト転送をサポートしますが、すべてのブラウザがオブジェクト転送をサポートしているわけではありません.使用中は文字列転送を使用したほうがいいです.
最近、プロジェクトで1つのニーズに遭遇した場合、1つのプロジェクトで別のプロジェクトを直接参照する必要があり、さまざまな状況が失敗した後、iframeを選択しました.呼び出し中に発生した問題を共有します.
router.go()の使用
この状況は主にiframeのsrc値を変更した後のルーティングジャンプ混乱に適用されます.
詳細:iframe->srcプロパティを複数回変更するとrouterが呼び出されます.go(-1)は、ルーティングが1段階後退するのではなく、iframeをウィンドウドキュメントとしてウィンドウドキュメントのwindowを呼び出す.history.go(-1)、親プロジェクトのルーティング後退機能は変更されていません.
解決方法:
Iframe->srcのプロパティ値を変更することなく、windowを使用します.location.replace(url)iframeがアクセスする内容を変更します.具体的なコードは次のとおりです.
<template>
<iframe ref="iframe" scrolling="auto" width="100%" height="100%" frameborder="0" >iframe>
template>
<script>
export default {
name: 'ComponentsName',
data() {
return {
url: ''
}
},
watch: {
url(val) {
if (val) {
this.$refs.iframe.contentWindow.location.replace(val)
}
}
}
}
script>
通信(親ページと子ページが通信)
2つのプロジェクト間で相互に通信し、ドメイン間の問題に関連し、サブページは親ページを直接呼び出すことができず、親ページもサブページを呼び出すことができない方法です.
エラー詳細:Error in created hook:“SecurityError:Blocked a frame with origin“http://*”from accessing a cross-origin frame.”
解決方法:postMessage
window.PostMessage()メソッドは、ソース間通信を安全に実現することができる.このメソッドが呼び出されると、すべてのページ・スクリプトが実行された後、ターゲット・ウィンドウにMessageEventメッセージが送信されます.コードは次のとおりです.
<html>
<head>
<title>Post Messagetitle>
head>
<body>
<div>
<div id="color">Frame Colordiv>
div>
<div>
<iframe id="child" width="50%" src="http://172.16.110.188/test.html" height="50vw" scrolling="auto" frameborder="0">iframe>
div>
<script type="text/javascript">
window.onload=function(){
document.getElementById('child').contentWindow.postMessage('getcolor','http://172.16.110.188');
}
window.addEventListener('message',function(e){
var color=e.data;
document.getElementById('color').style.backgroundColor=color;
},false);
script>
body>
html>
<html>
<head>
<style type="text/css">
html,body{
height:100%;
margin:0px;
}
#container{
widht:100%;
height:100%;
background-color:rgb(204, 102, 0);
}
style>
head>
<body style="height:100%;">
<div id="container" onclick="changeColor();">
click to change color
div>
<script type="text/javascript">
var container=document.getElementById('container');
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false);
function changeColor () {
var color=container.style.backgroundColor;
if(color=='rgb(204, 102, 0)'){
color='rgb(204, 204, 0)';
}else{
color='rgb(204,102,0)';
}
container.style.backgroundColor=color;
window.parent.postMessage(color,'*');
}
script>
body>
html>
上記の例では、2つの異なるドメインのページ間の通信が実現される.しかし、ここではiframeを動的に変更するために使用しています.contentWindow.locationがアクセスするコンテンツです.ここで親ページがサブページに通信を開始するにはiframeでページのロードが完了した後、サブページが通信データを取得できません.
シーンの適用
子ページで親ページを呼び出す方法や、親ページのデータを使用する必要がある場合は、子ページで親ページに通信を開始したり、親ページにデータを転送したりすることができます.
注意事項
postMessageはオブジェクト転送をサポートしますが、すべてのブラウザがオブジェクト転送をサポートしているわけではありません.使用中は文字列転送を使用したほうがいいです.