Question

由于其动态生成的组件结构和事件模型，与传统的静态HTML相反，问题的典型解决方案在React中不起作用。我尝试使用react-iframe-resizer-super但未找到完美的解决方案。

我的代码：

import UIKit
import CoreLocation
import MapKit


class ViewController: UIViewController,CLLocationManagerDelegate {

    var locationManager = CLLocationManager()


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let latitude1: CLLocationDegrees = 78.98
        let longitude1: CLLocationDegrees = 90.09
        let center1: CLLocationCoordinate2D = CLLocationCoordinate2DMake(latitude1, longitude1)
        let radius1: CLLocationDistance = CLLocationDistance(100.0)
        let identifier1: String = "Notre Dame"

        let currRegion1 = CLCircularRegion(center: center1, radius: radius1, identifier: identifier1)

        let latitude: CLLocationDegrees = 20.2020
        let longitude: CLLocationDegrees = 2.2945
        let center: CLLocationCoordinate2D = CLLocationCoordinate2DMake(latitude, longitude)
        let radius: CLLocationDistance = CLLocationDistance(100.0)
        let identifier: String = "Notre Dame"

        let currRegion  = CLCircularRegion(center: center, radius: radius, identifier: identifier)

        locationManager.distanceFilter = 10
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        currRegion1.notifyOnEntry = true
        currRegion.notifyOnEntry = true

        locationManager.delegate=self
        locationManager.requestAlwaysAuthorization()
        locationManager.startMonitoring(for: currRegion1)
        locationManager.startMonitoring(for: currRegion)
        locationManager.startUpdatingLocation()
    }

    func locationManager(_ manager: CLLocationManager, didEnterRegion region: CLRegion) {
        if region is CLCircularRegion {
            handleEvent(forRegion: region)
        }
    }

    func handleEvent(forRegion region: CLRegion!) {
        print("Geofence triggered!")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

然后我收到了以下错误：

import React, {PropTypes} from 'react';

import ReactIframeResizer from 'react-iframe-resizer-super';


class Frame extends React.Component {

    constructor() {
    super();
}

componentDidUpdate() {

        const iframeResizerOptions = {
          // log: true,
          // autoResize: true,
          checkOrigin: false,
          // resizeFrom: 'parent',
          // heightCalculationMethod: 'max',
          // initCallback: () => { console.log('ready!'); },
          // resizedCallback: () => { console.log('resized!'); },
      };
    }


    render() {

        return (

            <div style={{position: 'relative'}}>
                <IframeResizer iframeResizerOptions={iframeResizerOptions}>
                    <iframe scrolling="no" src="https://en.wikipedia.org/wiki/Main_Page" allowfullscreen
                            style={{width:'100%', height:'100%'}}
                    }}></iframe>
                 </IframeResizer>
            </div>
        );
    }
}

React中有没有办法将iframe的高度设置为其可滚动内容的高度，还是有其他方法来存档此要求？

我参考以下链接：

https://www.npmjs.com/package/react-iframe-resizer-supe - [R

Answer 1

这个问题很长，但我认为我会添加以防万一其他人在寻找使用react-iframe-resizer-super + iframe-resizer（JS）的澄清

上面代码中的问题是导入组件的拼写错误。

import ReactIframeResizer from 'react-iframe-resizer-super';

应该是：

import IframeResizer from 'react-iframe-resizer-super';

正如您在Frame组件中使用它一样。

对于那些希望澄清使用库的人来说，这是我死的简单工作解决方案：

在包含iFrame yarn add react-iframe-resizer-super iframe-resizer
在您用作iFrame源代码的网页上加入iframeResizer.contentWindow.min.js。
React中的用法：

<强> DynamicIFrame.jsx

import React from 'react';
import IframeResizer from 'react-iframe-resizer-super';

export const DynamicIFrame = props => {
  const { src } = props;
  const iframeResizerOptions = {
    log: true,
    // autoResize: true,
    checkOrigin: false,
    // resizeFrom: 'parent',
    // heightCalculationMethod: 'max',
    // initCallback: () => { console.log('ready!'); },
    // resizedCallback: () => { console.log('resized!'); },
  };
  return (
    <IframeResizer src={src} iframeResizerOptions={iframeResizerOptions} />
  );
};

使用IframeResizer将iframe高度设置为ReactJS中的scrollHeight

1 个答案: