Question

我打算在我的网站上嵌入一个调查密度调查（通过反应制作）。只是让这个工作很麻烦，但最终这个代码工作了：

let script = '<script>overly long link</script>';

let extractScript=/<script>(.+)<\/script>/gi.exec(script);
script = script.replace(extractScript[0], "");

class LeadForm extends React.Component {
    componentDidMount() {
        window.eval(extractScript[1]);
    }

    render() {
        return <div id="surveyMonkey" dangerouslySetInnerHTML={{__html: script}}/>;
    }
}

这是调查monkey呈现的方法，但它停留在屏幕的左上角 - 使网站的大部分完全无法使用。 div“surveyMonkey”上的任何css样式都不起作用。

任何见解都将不胜感激！感谢。

编辑：他们给我嵌入调查的代码如下：

<script>(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd2n0EyEqR4XLlegogsUllbowWHzPdjEQtkQpaEg2LAEE.js"].join(""),a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");</script><a style="font: 12px Helvetica, sans-serif; color: #999; text-decoration: none;" href=https://www.surveymonkey.com> Create your own user feedback survey </a>

Answer 1

按照您在此处找到的文档：How to Embed Your Survey on a Website。看起来还有一些文档可以在这里找到：Embedding Your Survey on a Website

请勿使用eval，因为您不需要{I}，我也会远离dangerouslySetInnerHTML。它有危险的事实＆＃34;在函数名称中应该暂停。

找到您提供的src标记的<script>属性，并在下面的代码中使用它。

然后做这样的事情：

class LeadForm extends React.Component {
    componentDidMount() {
        let el = document.createElement("script");
        el.src = "SOME_SCRIPT_SRC";
        document.body.appendChild(el);
    }

    render() {
        return <div id="surveyMonkey"/>;
    }
}

Answer 2

感谢@ zero298和@Pambi，以下解决方案对我有用：

class Survey extends React.Component {

  componentDidMount() {
    let el = document.createElement("script");
    el.src = "https://widget.surveymonkey.com/collect/website/js/tRaisffsdgj758hTBazgd4IXxGtDzETeaqu1iDMfLhIPM5OoAHZFDWBMRDTjq_2dfsd.js";
    document.body.appendChild(el);
}

    render() {
      return <Container className="pageContainer">
      <Row className="homeRow">
      <div id="smcx-sdk"></div>   
      </Row>
    </Container>
    }
  }
  export default Survey

Answer 3

我通过在要放置调查的位置添加<div id="smcx-sdk"></div>来在Survey网站上嵌入Surveymonkey。

结果是这样的：

import * as React from 'react';
import { Helmet } from 'react-helmet';

class Survey extends React.Component {
    render() {
        return(
            <div id="smcx-sdk"></div>
            <Helmet>
                <script 
                    src="https://widget.surveymonkey.com/collect/website/js/TOKEN.js" 
                    type="text/javascript"
                />
            </Helmet>
        )
    }
}

带有令牌的URL取自它们提供的脚本。可以使用CSS进行一些样式设置。

Answer 4

到目前为止，嵌入代码正在将iframe与调查猴子src URL附加在一起。

以简单的HTML嵌入脚本
检查iframe广告代码
您将找到与以下类似的代码

0.7
复制具有属性的iframe标记，然后将其放置在所需位置。

React嵌入脚本标记不可用

4 个答案: