react.js - iframe 不能访问src地址

查看:369
本文介绍了react.js - iframe 不能访问src地址的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

无法访问iframe地址

index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React from 'react'

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Outside iFrame</h1>
                <iframe title="myiframe" src="./target.html" width="600px" height="400px"></iframe>
            </div>
        )
    }
}

export default App

target.html

<html>

<head></head>

<body>
    <h1>Inside IFrame</h1>
</body>

</html>

index.html

<div id="root"></div>

为什么引入的是

<iframe title="myiframe" src="./target.html" width="600px" height="400px"></iframe>

而页面显示的是:

解决方案

我使用的是

CREATE-REACT-APP
加载image图片也不能直接使用路径

不是不能而是要使用 index.html文件的路径为基础

< img src="./logo.png"/>

可以引入

import a from "./img/a.png";

使用

<div><img src={a} /></div>

creat-react-app 如何在组件中的src引入路径

总结:
import根据当前文件路径为基础
src根据index.html路径为基础

这篇关于react.js - iframe 不能访问src地址的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆