问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

iframe 不能访问src地址

头像
custer
    811410

    无法访问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>

    而页面显示的是：

    clipboard.png

    clipboard.png

    clipboard.png

    reactiframe
    阅读 13k
    5 个回答
    得票最新
    头像
    custer
      811410
      ✓ 已被采纳

      我使用的是

      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路径为基础

      头像
      迷雾麋鹿小小伟
        2
        新手上路，请多包涵

        我遇到跟你一摸一样的问题,请问你解决了吗

        头像
        justonestory
          1
          新手上路，请多包涵

          请问你的问题解决了么，我也遇到同样的问题了

          头像
          anhengchangyua
            4
            新手上路，请多包涵

            我也遇到了 请问你的问题解决了么，我也遇到同样的问题了

            头像
            lovesly
              2
              新手上路，请多包涵

              create-react-app 创建的项目， src 引用的是相对于 index.html 的路径。 你这个循环嵌套 iframe 的情况， 应该是 iframe 路径错了。 没找到 src 指向的文件， 然后又 redirect 回 index.html。 所以会不停嵌套主页面。

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题