如何在react里嵌入iframe?
无法访问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>
如何在react里嵌入iframe?的更多相关文章
- [Web 前端] 如何在React中做Ajax 请求?
cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...
- session失效后,登录页面嵌入iframe框架
在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...
- 在JavaScript里嵌入大量字符串常量的方法
[转]在JavaScript文件里嵌入大量字符串常量是经常遇到的事.有时为了省事,就把一些界面的HTML和CSS直接写在JS文件里.数量少还好,多的话就密密麻麻的一坨文字,讲究美观的文艺青年们,会用大 ...
- 响应式嵌入 iframe Pym.js
Pym.js 可以让你在嵌入 iframe 的时候可自动的对 iframe 的大小进行调整以适应父一层容器,并且可以避免跨域问题. 支持浏览器: Internet Explorer 9, 10 (Wi ...
- 【Egret】里使用iframe标签达到内嵌多个web界面
目的:Egret里使用iframe标签达到内嵌多个web界面,模式相当于主swf调用N个子swf的效果: 目前在做项目过程中,在使用iframe的时候,碰到了一些功能需求,以及解决方法如下: 一..在 ...
- 如何在BIOS里设置定时关机?
如何在BIOS里设置定时关机? 通过CMOS设置实现定时开机的设置过程如下: 首先进入"CMOS SETUP"程序(大多数主板是在计算机启动时按DEL键进入): 然后将光条移到&q ...
- 模拟vue的tag属性,在react里实现自定义Link
我封装了一个简单的实现react里自定义Link的方法,方便大家使用. 因为普通组件没有metch.location.history等属性.只有在<Router>里面的<compon ...
- 如何在IDEA里给大数据项目导入该项目的相关源码(博主推荐)(类似eclipse里同一个workspace下单个子项目存在)(图文详解)
不多说,直接上干货! 如果在一个界面里,可以是单个项目 注意:本文是以gradle项目的方式来做的! 如何在IDEA里正确导入从Github上下载的Gradle项目(含相关源码)(博主推荐)(图文详解 ...
- [转]如何在 Git 里撤销(几乎)任何操作
任何版本控制系统的一个最有的用特性就是“撤销 (undo)”你的错误操作的能力.在 Git 里,“撤销” 蕴含了不少略有差别的功能. 当你进行一次新的提交的时候,Git 会保存你代码库在那个特定时间点 ...
随机推荐
- Mautic-2.2.0 (Ubuntu 16.04)
平台: Ubuntu 类型: 虚拟机镜像 软件包: mautic-2.2.0 business intelligence commercial ecommerce mautic open-source ...
- iBrand 教程:Git 软件安装过程截图
下载 教程中使用的相关软件下载网盘: https://pan.baidu.com/s/1bqVD5MJ 密码:4lku 安装 请右键 以管理员身份运行 进行软件安装,安装过程如下: 使用 安装完成后, ...
- vos限制客户呼出时间
问题: 公司希望自己的卡线晚上 21:00-24:00 早上00:00-7:30不能打出电话,以防遭投拆, 那么如何设置? 方法: 找到客户使用的落地网关, 落地网关——补充设置——
- centos命令行常用操作
1.查看某个端口占用 lsof -i tcp:80 2.查看是否安装了防火墙 service iptables status 查看是否启用防火墙/etc/init.d/iptables status ...
- Linux远程桌面(三)
上一篇中的vnc配置已经很方便了,这一篇介绍更为简单的xmanager的配置,xmanager画面好一丢丢. Xmanager服务器配置 Linux远程桌面(二):vnc之xi ...
- May 6th 2017 Week 18th Saturday
A great ship asks deep water. 巨轮寻深水而航行. A great ship needs deep water so as to get enough buoyancy t ...
- IOS 封装View的fram(X Y W H )
@interface UIView (Extension) @property (nonatomic, assign) CGFloat x; @property (nonatomic, assign) ...
- #WPF的3D开发技术基础梳理
原文:#WPF的3D开发技术基础梳理 自学WPF已经有半年有余了,一遍用,一边学.但是一直没有去触摸WPF的3D开发相关技术,因为总觉得在内心是一座大山,觉得自己没有能力去逾越.最近因为一个项目的相关 ...
- Could not autowire. No beans of 'TbAssetsMapper' type found. less... (Ctrl+F1) Inspection info:Checks autowiring problems in a bean class.
报错:Could not autowire. No beans of 'TbAssetsMapper' type found. less... (Ctrl+F1) Inspection info:Ch ...
- C# 使用布尔操作符
布尔操作符(Boolean operator)是求值结果要么为true,要么为false的一种操作符.C#提供了几个非常有用的布尔操作符,其中最简单的是NOT(求反)操作符,它使用感叹号(!)来表示. ...