无法在我的页面上显示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 (将#修改为@）