Question

我尝试使用fetch API从链接中提取HTML，因为链接具有身份验证。现在我想将HTML提取到一个名为text的变量中。有用。现在我想将HTML插入一个iframe，它在.then（）代码块中不起作用。所以我想在块外面的text变量中使用代码并创建一个iframe。有谁知道怎么做？

主要目标是在数据变量中创建带有html内容的iframe。在此先感谢!!

import React, { Component, PropTypes } from 'react';
import fetch from 'isomorphic-fetch';
let text='';
class TestingContainer extends Component {

  getContent () {
let text='';
    fetch('http://gsspcontent.mybluemix.net/services/alerts.html', {
        method: 'GET',
        headers: {
            'Content-Type': 'text/html',
            'Authorization': 'Basic Z3NzcDphcGlzdHVi'
        }
    })
    .then(function(response) {
        response.text().then(function(text){
        console.log('this is inside and it works', text);
        <iframe srcDoc = {Data} ></iframe>
        });
    });
    console.log('this is outside and it doesnt work', text);
    console.log('this is outside and it doesnt work', this.text);
    console.log('this is outside and it doesnt work', this.props.text);
  }

    render() {

        return (
            <div>
                <div>Testing Page</div>
              {this.getContent()}
              <iframe srcDoc = {this.Data} ></iframe> {/* this doesnt work too */}
            </div>
        );
    }
}

export default TestingContainer;

控制台日志如下所示

this is outside and it doesnt work 
testing.component.js?af5d:22 this is outside and it doesnt work undefined
testing.component.js?af5d:23 this is outside and it doesnt work undefined
testing.component.js?af5d:17 this is inside and it works <meta     charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script>

.btn-warning {
background:#8caa0a;
}

</script>

<div class="container">

<div class="row">

<div class="col-md-4">

<p align="center"><font style="font-family:'Open Sans';font-size:32px;line-height:32px;color:#333333; ">Alerts</font></p>
<p align="center"><font style="font-size:20px;line-height:20px;color:#333333;font-weight: 200; ">Be in the know</font></p>


<p align="left"><font style="font-size:14px;line-height:14px;color:#333333; ">Go anywhere and keep connected! Stay on top of your accounts with bill reminders and payment updates sent to your email or mobile device.</font></p>


 <div class="col-sm-6" style="float:left;padding-left:0px;">

<img style="width: 100%;height:100px;" src="metlife_snoopie.png"  alt=“Sample Image">       

 </div>


<div class="col-sm-6" style="float:right;padding-top:50px;">


<a href="#"  style="background:#8caa0a;" class="btn-warning btn-sm" role="button"><font style= "font-family:'Open Sans';font-size:10px;line-    height:12px;">SIGN UP TODAY
        </font></a>

 </div>



</div>


</div>

</div>

如何使用函数外部的变量？

0 个答案: