如何解决无法在我的页面上显示Iframe React + Noje
我正在尝试使用Iframurl将配置数据库仪表板嵌入到我网站上的页面上,当前将其包装到函数getMetabaseIFrameUrl()
中,该函数返回完整的Iframeurl。抱歉,如果这很容易,或者我是盲人,不熟悉React和Js,主要是不时使用python,R和Java或C#。
getMetabaseIFrameUrl(){
// you will need to install via 'npm install jsonwebtoken' or in your package.json
var jwt = require("jsonwebtoken");
var MetaBASE_SITE_URL = "http://analytics.stemuli.net";
var MetaBASE_SECRET_KEY = "a6b131ba7e99a2f51d172e877d1490a14d66018aef05e3cb2b63a479accc0d67";
var payload = {
resource: { dashboard: 1 },params: {},exp: Math.round(Date.Now() / 1000) + (10 * 60) // 10 minute expiration
};
var token = jwt.sign(payload,MetaBASE_SECRET_KEY);
var iframeUrl = MetaBASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true";
return iframeUrl;
};
在渲染调用中,我可以看到正常的标题,但是ifram没有填充,并且无法看到仪表板。
有什么建议吗?
import React,{ Component,Fragment } from "react";
// import { iframeUrl } from "MetabaseAuth/IndustryEmbedAuth.js"
import GridContainer from "components/Grid/GridContainer.jsx";
import GridItem from "components/Grid/GridItem.jsx";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { getPartnerData } from "../../oldComp/actions/partnerActions";
import { getSchool } from "../../oldComp/actions/schoolActions";
import {
saveProfile,getCurrentProfile,} from "../../oldComp/actions/profileActions";
import { refreshUser } from "../../oldComp/actions/authActions";
import {
withStyles,MuiThemeProvider,createMuiTheme,} from "@material-ui/core/styles";
import styles from "assets/jss/material-dashboard-pro-react/exploreSearchStyles.jsx";
import districtStyles from "../../assets/jss/material-dashboard-pro-react/views/Dashboards/districtStyles.jsx";
const theme = createMuiTheme({
palette: {
primary: {
main: "#747474",},typography: { useNextvariants: true },});
class IndustryEmbed extends Component{
constructor(props){
super(props);
this.props.getCurrentProfile();
this.props.getSchool();
// this.onChange = this.onChange.bind(this);
// this.opendocument = this.opendocument.bind(this);
// this.closeModal = this.closeModal.bind(this);
}
getMetabaseIFrameUrl(){
// you will need to install via 'npm install jsonwebtoken' or in your package.json
var jwt = require("jsonwebtoken");
var MetaBASE_SITE_URL = "http://analytics.stemuli.net";
var MetaBASE_SECRET_KEY = "a6b131ba7e99a2f51d172e877d1490a14d66018aef05e3cb2b63a479accc0d67";
var payload = {
resource: { dashboard: 1 },MetaBASE_SECRET_KEY);
var iframeUrl = MetaBASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true";
return iframeUrl;
};
render(){
const { user } = this.props.auth;
const { schoolData } = this.props.school;
console.log("this.state",this.state);
return(
<Fragment>
<header class="industry-embed-header">
<h1 style={{ paddingTop: 55 }}>Analytics Tailored To You</h1>
</header>
<iframe
src={this.getMetabaseIFrameUrl.bind(this)}
frameBorder={0}
width={800}
height={600}
allowTransparency
/>
</Fragment>
);
}
}
IndustryEmbed.propTypes = {
profile: PropTypes.object,auth: PropTypes.object.isrequired,errors: PropTypes.object.isrequired,school: PropTypes.object,partner: PropTypes.object,};
const mapStatetoProps = (state) => ({
profile: state.profile,auth: state.auth,partner: state.partnerData.partner,school: state.schoolData,errors: state.errors,});
export default connect(mapStatetoProps,{
saveProfile,refreshUser,getPartnerData,getSchool,})(withStyles(styles)(IndustryEmbed));
This is how it displays when run ona server
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。