k线页嵌入手炒 F10 页面开发复盘 ​

const diffy = 
  $('.nav-bar').height() + $('controll-bar').height() + $('.tab-bar').height()  
const iframeHeight = window.outerHeight - diffy
const iframeWidth = $('.tab-bar').width() || window.outerWidth

// hqCharts.js
import { stopTabScrollEvent, getThsPageTabDom } from './utils'

class HqCharts extends Component {
  componentDidMount() {
    // ...
    const tabsDom = getThsPageTabDom();
    tabsDom?.addEventListener?.('touchmove', stopTabScrollEvent);
  }
  
  componentWillUnMount() {
    // ...
    const tabsDom = getThsPageTabDom();
    tabsDom?.removeEventListener?.('touchmove', stopTabScrollEvent);
  }

  render() {
    // ...
  }
}

// utils.js
/** tab 滚动到顶部的时候禁止 tab 的滚动事件 */
export const stopTabScrollEvent = e => {
  // html 的滚动距离
  const htmlEleScrollTop = document.querySelector('html')?.scrollTop;
  const contain_height = getDomHeight('.kline_render_contain');
  const tab_height = getDomHeight(extendModuleTabSelector);
  const navHeight = getDomHeight('.nav-bar');
  // 最大滚动距离
  const maxScrollTop = contain_height - tab_height - navHeight;
  if (!htmlEleScrollTop || !maxScrollTop) {
    return;
  }
  if (htmlEleScrollTop >= maxScrollTop) {
    e?.preventDefault?.();
  }
};

export const getThsPageTabDom = () => document.querySelector('.tab-bar')

// 获取 iframe 内嵌 F10 页面的 html 元素
const iframeHtmlEle = 
  DOMS.F10Iframe()?.contentWindow?.document?.querySelector?.('html');
// 设置 F10 页面的高度，通过控制 overflow 的行为控制 F10 h5 是否能滚动
iframeHtmlEle.style.height = `${iframe_height}px`;
iframeHtmlEle.style.overflowY = tabOfffsetY > headerHeight ? 'hidden' : 'auto';

var nowScrollTop = 0//初始化
//禁止滚轮
function touchStart_js_scroll_puncture() {
    event.preventDefault();
}
export function clickPop(type) {
    var _type = type || "1"
    switch (_type) {
        case "1":
            document.addEventListener(
              'touchmove', 
              touchStart_js_scroll_puncture, 
              { passive: false }
            );
            //适配pc滚动事件
            document.addEventListener(
              'wheel', 
              touchStart_js_scroll_puncture, 
              { passive: false }
            );
            break;
        case "2":
            //将页面的scroolTop赋值给变量
            nowScrollTop = document.body.scrollTop || document.documentElement.scrollTop 
            document.body.style.position = "fixed"
            document.body.style.top = -nowScrollTop + 'px'
            break;
        case '3':
            //仅禁止pc滚动事件
            document.addEventListener(
              'wheel', 
              touchStart_js_scroll_puncture,
              { passive: false }
            );
            break;
        default:
            break;
    }

}
//激活滚轮
export function closePop(type) {
    var _type = type || "1"
    switch (_type) {
        case "1":
            document.removeEventListener(
              'touchmove', 
              touchStart_js_scroll_puncture,
              { passive: false }
            );
            //适配pc滚动事件
            document.removeEventListener(
              'wheel', 
              touchStart_js_scroll_puncture, 
              { passive: false }
            );
            break;
        case "2":
            document.body.style.position = "static"
            document.body.scrollTop = document.documentElement.scrollTop = nowScrollTop
            break;
        case '3':
            //仅禁止pc滚动事件
            document.removeEventListener(
              'wheel', 
              touchStart_js_scroll_puncture, 
              { passive: false }
            );
            break;
        default:
            break;
    }

}

/**
 * @desc 开启关闭 webview 弹性滚动
 * @param {0|1} data  0-关闭 1-开启
 */
export const setWebViewConfig = function (data) {
  return new Promise(function (resolve) {
    if (bridgeIns) {
      bridgeIns.callHandler('setWebViewConfig', data);
    } else {
      initBridge().then(bridge => {
        bridgeIns = bridge;
        bridgeIns.callHandler('setWebViewConfig', data);
      });
    }
    resolve('1');
  });
}

if (isIos) {
  iframeHtmlEle.style.position = tabOfffsetY > headerHeight ? 'fixed' : 'static'
}

/*
 * @Author: wanghaofeng
 * @Date: 2023-10-12 13:43:53
 * @LastEditors: wanghaofeng
 */
import { useMemo, useEffect, useLayoutEffect } from 'react';
import { useDebounceFn } from 'ahooks';
import { getPlatformUtil } from '../../../utils/utils';

const isIos = getPlatformUtil().versions.ios;

const getTzzbAppVersion = () => {
	const u = navigator.userAgent;
	const index = u.indexOf('Hexin_xcs');
	const TEN = 10;
	if (index > -1) {
		return u.substr(index + TEN);
	} else {
		return '';
	}
};

const DOMS = {
	hdPageTabs: () => document.querySelector('.hd_page_tabs'),
	navBarBlock: () => document.querySelector('.navBar-block'),
	F10Iframe: () => document.querySelector('#F10_iframe'),
};

const getIframeHtmlEle = () => 
  DOMS.F10Iframe()?.contentWindow?.document?.querySelector?.('html');

const getScrollInfo = () => {
	const tabOfffsetY = parseInt(
    DOMS.hdPageTabs()?.getBoundingClientRect?.()?.top || 0
  );
	const headerHeight = parseInt(
    DOMS.navBarBlock()?.getBoundingClientRect?.()?.height || 0
  );
	return {
		tabOfffsetY,
		headerHeight,
	};
};

const scrollDebounceTime = 200;

export default function F10Page(props) {
	const { iframe_width, iframe_height, show, selectedStockItem } = props;

	const { code = '', market = '' } = selectedStockItem;
	const iframeUrl = useMemo(() => {
    const query = 'query--a-a-a-a-a';
		const url = 'F10-URL' + query;
		return url;
	}, [code, market]);

	// iframe 滚动行为修改新增防抖处理，避免在到达临界值附近出现多次抖动
	const { run: iframeScrollActionControl } = useDebounceFn(
		() => {
			const { tabOfffsetY, headerHeight } = getScrollInfo();
			if (!tabOfffsetY || !headerHeight) {
				return;
			}
			const iframeHtmlEle = getIframeHtmlEle();
			if (iframeHtmlEle?.style) {
				iframeHtmlEle.style.height = `${iframe_height}px`;
				iframeHtmlEle.style.overflowY = tabOfffsetY > headerHeight 
          ? 'hidden' 
          : 'auto';
        if (isIos) {
          iframeHtmlEle.style.position = tabOfffsetY > headerHeight 
            ? 'fixed' 
            : 'static'
        }
			}
		},
		{
			wait: scrollDebounceTime,
		}
	);

	const iframeOneLoadAction = () => {
		const iframeHtmlEle = getIframeHtmlEle();
		if (iframeHtmlEle?.style) {
			iframeHtmlEle.style.overflowY = 'hidden';
      if (isIos) {
			  iframeHtmlEle.style.position = 'fixed';
      }
		}
	};


	useLayoutEffect(() => {
		const iframeDom = DOMS.F10Iframe();
		if (iframeDom) {
			// iframe 加载时默认禁止滚动
			iframeDom.onload = () => iframeOneLoadAction();
		}
		document?.addEventListener?.('scroll', iframeScrollActionControl);
    
		return () => {
			document?.removeEventListener?.('scroll', iframeScrollActionControl);
		};
	}, [code]);

	return (
			<iframe
				style={{ display: show ? 'block' : 'none' }}
				id='F10_iframe'
				frameBorder={0}
				src={iframeUrl}
				width={iframe_width}
				height={iframe_height}
			/>
	);
}