React Iframe 使用探索

白雪新号 發表於 2020-6-17 13:55:00

<div>
<div>
作者后端经验比较丰富，近期要做跨域跨前端框架的前端页面展示，自然联想到了 IFRAME 方法，细致了解下来发现它可以用来解决很多棘手问题，包括：
<ul>
<li>跨域问题</li>
<li>Ajax 前进后退问题</li>
<li>异步上传问题</li>
<li>跨框架问题</li>
</ul>
<h1>父页面</h1>
<h2>基础 React 框架</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-js"><code class="jslanguage-js">import React, { PureComponent } from 'react';

export default class Iframe extends PureComponent {

render () {
 return (
 <div>
 <h1>Parent</h1>
 <p>Send Message
 <button id="message_button" onClick={this.handleParentClick.bind(this)}>Hi child</button>
 </p>
 <span> Show Message </span>
 <div id='results'></div>
 </div>
 );
}
}
</code></pre>
</div>
<code>import</code> 和 <code>export</code> 外部都是 React 基本框架，内部显示了页面布局：
 
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1488" data-height="236"><img src="//upload-images.jianshu.io/upload_images/4078144-bff0e3144281b7fc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>
</div>
<div class="image-caption">Parent</div>
</div>
 
<code>Parent</code> 提示当前部分是父页面； 
<code>Send Message</code> 和 <code>Hi child</code> 按钮用来向 iframe 传递消息，按钮绑定了点击事件 <code>handleParentClick</code>，后文会定义； 
<code>Show Message</code> 和 <code>results div</code> 用来展示 iframe 传来的消息，后文会做处理。
 
<h2>iframe 相关事件</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-js"><code class="jslanguage-js">export default class Iframe extends PureComponent {

receiveMessageFromIframe ( event ) {
 // React will send message started with setImmediate
 if (!event.data.startsWith('setImmediate')){
 console.log("parent received", event.data);
 const results = document.getElementById('results');
 results.innerHTML = event.data;
 }
}

componentDidMount () {
 // "message" name cannot be changed
 window.addEventListener("message", this.receiveMessageFromIframe, false);
}

handleParentClick = () => {
 //必须是iframe加载完成后才可以向子域发送数据
 const childFrameObj = document.getElementById('myFrame');
 childFrameObj.contentWindow.postMessage("This is parent", '*');
 console.log("iframe height", childFrameObj.contentWindow.document.body.offsetHeight);
 childFrameObj.height = childFrameObj.contentWindow.document.body.offsetHeight + 60;// there will be some margin and stylistic height
 console.log("iframe window", childFrameObj.contentWindow);
 console.log("iframde document", childFrameObj.contentWindow.document);
 console.log("iframe html", childFrameObj.contentWindow.document.documentElement);
}

render () {
 ...
}
}
</code></pre>
</div>
<ul>
<li>
<code>handleParentClick</code> 函数是处理 <code>Hi child</code> 按钮点击事件的：
<ol>
<li>先从 DOM 中获得名字为 <code>myFrame</code> 的节点（后文 iframe 部分会展示）。</li>
<li>通过 <code>contentWindow.postMessage</code> 方法向 iframe 传递信息，参数有两个，第一个是传递的信息内容（<code>This is parent</code>），另一个是 <code>targetOrigin</code>，即目标域，<code>*</code> 表示当前域，也可以写成 <code>http://baidu.com</code> 等其他域名，但注意 iframe 的域必须和这个域名一致。</li>
<li>后面 2 行通过 <code>contentWindow.document.body.offsetHeight</code> 获得 iframe 页面高度，方便后续做自适应调整，<code>+60</code> 因为样式上会产生其他的高度，这里是作为 buffer，实际使用中根据需要调整。</li>
<li>后面 3 行通过打印的方式展现常用可以获取的 iframe 信息，包括 <code>window</code>, <code>document</code>, <code>html</code> 等。</li>
</ol></li>
<li>
<code>componentDidMount</code> 函数是在页面加载后执行，React 的典型语法，这里增加了 parent 对 iframe 的事件监听。
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-js"><code class="jslanguage-js">window.addEventListener("message", this.receiveMessageFromIframe, false);
</code></pre>
</div>
第一个参数不能修改，事件名称是 <code>message</code>，第二个参数是 <code>eventHandler</code>，这里使用外面定义的 <code>receiveMessageFromIframe</code> 方法，第三个参数是默认值。
</li>
</ul>
<ul>
<li><code>receiveMessageFromIframe</code> 函数是事件监听的处理函数，注意 React 也会使用 message 数据驱动，所以这里有过滤 message 以 <code>setImmediate</code> 开头的信息，以捕获 iframe 真正传输的数据。获得数据后在展示区 <code>results div</code> 添加获得的信息。</li>
</ul>
<h1>iframe 页面</h1>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-js"><code class="jslanguage-js">export default class Iframe extends PureComponent {
render () {
 return (
 <div>
 ...
 <iframe
 id="myFrame"
 width="100%"
 height={0}
 frameBorder={1}
 scrolling="no"
 srcDoc="
 <h1>myFrame</h1>
 <p>Send Message: <button id='message_button'}>Hi parent</button></p>
 <span>Show Message</span>
 <div id='results'></div>
 <script>
 function receiveMessageFromParent ( event ) {
 let results = document.getElementById('results');
 results.innerHTML += event.data + ' ';
 };
 window.addEventListener('message', receiveMessageFromParent, false);

 let messageButton = document.getElementById('message_button');
 /* console.log('msg button', messageButton); annoataion cannot use \/\/*/
 messageButton.addEventListener('click', function (e) {
 console.log('iframe send msg');
 console.log('parent', window.parent);
 console.log('top container', window.top);
 window.parent.postMessage('This is child', '*');
 }, false);
 </script>
 "
 />
 </div>
 );
}
}
</code></pre>
</div>
<h2>原生 html 页面</h2>
<code>id</code> 是 DOM 上节点名称，上文有使用这里的 <code>myFrame</code> 来获得节点进行操作； 
<code>width="100%"</code> 是 iframe 宽度，可以是百分比或者数值，百分比可以自适应页面； 
<code>frameBorder={1}</code> 是 iframe 边框是否展示，1 代表展示，0 代表不展示； 
<code>scrolling="no"</code> 是滚动设置，yes 代表展示，no 代表不展示，auto 代表自动识别； 
<code>height={0}</code> 是 iframe 高度，可以是百分比或者数值，这里设置为 0 代表无内容不展示，有内容后上文根据内容高度自适应展示； 
<code>srcDoc=<string></code> 是 iframe 的 DOM，可以使用原生 HTML 编写； 
<code>src</code> 是 iframe 的信息源。 
<code>srcDoc</code> 内设置了 iframe 页面：
<ol>
<li>
<code>myFrame</code> 提示当前是 iframe 页面；</li>
<li>
<code>Send Message</code> 和 <code>Hi parent</code> 是信息传输部分；</li>
<li>
<code>Show Message</code> 和 <code>results</code> 用来展示从 parent 接受到的信息。</li>

</ol>
<h2>js 控制脚本</h2>
<ul>
<li>
<code>receiveMessageFromParent</code> 函数用来控制从 parent 接受到信息后展示在展示区；</li>
<li>
<code>window.addEventListener</code> 用来初始化事件监听，和 parent 的事件监听机制一样，不赘述；</li>
<li>
<code>messageButton</code> 获取了当前组件的点击按钮；</li>
<li>
<code>messageButton.addEventListener</code> 在点击按钮上绑定了点击事件，注意点击事件名称不可修改，是 <code>click</code>，向 parent 传递消息使用 <code>window.parent.postMessage</code>，和 parent 的 postMessage 参数一致，不赘述。</li>
<li>注意：iframe 使用的原生 html 页面注释不能使用 <code>//</code> 方法，只能使用 <code>/* */</code> 完成。</li>

</ul>
<h1>整体代码和效果</h1>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-js"><code class="jslanguage-js">import React, { PureComponent } from 'react';

export default class Iframe extends PureComponent {

receiveMessageFromIframe ( event ) {
if (!event.data.startsWith('setImmediate')){// React will send message started with setImmediate
 console.log("parent received", event.data);
 const results = document.getElementById('results');
 results.innerHTML = event.data;
}
}

componentDidMount () {
window.addEventListener("message", this.receiveMessageFromIframe, false);// "message" name cannot be changed
}

handleParentClick = () => {
//必须是iframe加载完成后才可以向子域发送数据
const childFrameObj = document.getElementById('myFrame');
childFrameObj.contentWindow.postMessage("This is parent", '*');
console.log("iframe height", childFrameObj.contentWindow.document.body.offsetHeight);
childFrameObj.height = childFrameObj.contentWindow.document.body.offsetHeight + 60;// there will be some margin and stylistic height
console.log("iframe window", childFrameObj.contentWindow);
console.log("iframde document", childFrameObj.contentWindow.document);
console.log("iframe html", childFrameObj.contentWindow.document.documentElement);
}

render () {

return (
 <div>
 <h1>Parent</h1>
 <p>Send Message <button id="message_button" onClick={this.handleParentClick.bind(this)}>Hi child</button></p>
 <span>Show Message </span>
 <div id='results'></div>
 <iframe
 id="myFrame"
 width="100%"
 height={0}
 frameBorder={1}
 scrolling="no"
 srcDoc="
 <h1>myFrame</h1>
 <p>Send Message: <button id='message_button'}>Hi parent</button></p>
 <span>Show Message</span>
 <div id='results'></div>
 <script>
 function receiveMessageFromParent ( event ) {
 let results = document.getElementById('results');
 results.innerHTML += event.data + ' ';
 };
 window.addEventListener('message', receiveMessageFromParent, false);

 let messageButton = document.getElementById('message_button');
 /* console.log('msg button', messageButton); annoataion cannot use \/\/*/
 messageButton.addEventListener('click', function (e) {
 console.log('iframe send msg');
 console.log('parent', window.parent);
 console.log('top container', window.top);
 window.parent.postMessage('This is child', '*');
 }, false);
 </script>
 "
 />
 </div>
);
}
}

</code></pre>
</div>
<ul>
<li>
初始效果，iframe 不展示：
 
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1488" data-height="236"><img src="//upload-images.jianshu.io/upload_images/4078144-fd0c200fd14a024b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>

</div>
<div class="image-caption">Parent</div>

</div>

</li>
<li>点击 <code>Hi child</code> 从 parent 传递信息给 iframe，iframe 自适应加载： 
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1496" data-height="608"><img src="//upload-images.jianshu.io/upload_images/4078144-3bfce796e254da71.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>

</div>
<div class="image-caption">image</div>

</div>

</li>
<li>多次点击 <code>Hi child</code>，iframe 自适应加载： 
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1492" data-height="706"><img src="//upload-images.jianshu.io/upload_images/4078144-68f51a97c13f0edb.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>

</div>
<div class="image-caption">image</div>

</div>

</li>
<li>点击 <code>Hi parent</code> 从 iframe 传递信息给 parent，展示信息： 
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1494" data-height="734"><img src="//upload-images.jianshu.io/upload_images/4078144-7292c3ea913da901.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>

</div>
<div class="image-caption">image</div>

</div>

</li>

</ul>

</div>

 作者：Sisyphus235 链接：https://www.jianshu.com/p/e9239d820846 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</div> 
来源：https://www.cnblogs.com/liangzhixiaolaohu/p/13152084.html

頁: [1]

琼殿技术论坛's Archiver

React Iframe 使用探索