如何使用 Wix Iframe 将提交重定向到父窗口？

Question

您好，任何人都可以帮助我获取与提交按钮相关联的网址以在父窗口中打开吗？

我正在使用 Wix html 编辑器添加代码，但由于某种原因，在提交 returnURL 时只显示在 iframe 内，并且不将 url 指向整个窗口？

任何帮助将不胜感激！

    <input type='text' style='display:none;' name='returnURL' 
    value='https://www.MYURL.co.uk/' > </input>
       <!-- Do not remove this code. -->
        <style>
        #crmWebToEntityForm tr , #crmWebToEntityForm td { 
            padding-left:0px;
             padding-right:0px;
            border-spacing:0px;
            border-width:0px;
            }
    </style>
    <table style='width:260px;background-color:#3a3b3f;background-color:ffffff;color:black'> 
  <tr></tr> 
  <tr>
  <td style='width:100%;'><input type='text' placeholder="First Name" maxlength='40'  
  style='width:260px; height:50' name='First Name'></input></td>
  <td style='width: 100%;'></td></tr><tr><td style='width:260px;'>
  <input type='text'placeholder="Last Name" maxlength='80'  style='width:100%; height:50' 
  name='Last Name'></input></td><td style='width: 260px;'></td></tr>
  <tr>
  <td style='width:100%;'><input type='text' placeholder="Phone Number" maxlength='30'  
  style='width:260px; height:50' name='Phone'></input></td>
  <td style='width: 100%;'></td></tr><tr><td style='width:100%;'><input type='text' 
  placeholder="Email Address" maxlength='100'  style='width:260px; height:50' name='Email'> 
  </input></td>
   <td style='width: 100%;'></td></tr><tr><tr style='display:none;' ><td style='width:260px'>
        <select style='width:260px;box-sizing:border-box;' name='Lead Source'>
            <option value='-None-'>-None-</option>
            <option value='Advertisement'>Advertisement</option>
        <option value='Cold&#x20;Call'>Cold Call</option>
            <option value='Employee&#x20;Referral'>Employee Referral</option>
        <option value='External&#x20;Referral'>External Referral</option>
        <option value='Partner'>Partner</option>
        <option value='Public&#x20;Relations'>Public Relations</option>
        <option value='Trade&#x20;Show'>Trade Show</option>
        <option selected value='Web&#x20;Form'>Web Form</option>
        <option value='Search&#x20;Engine'>Search Engine</option>
        <option value='Facebook'>Facebook</option>
        <option value='Twitter'>Twitter</option>
        <option value='Online&#x20;Store'>Online Store</option>
        <option value='Seminar&#x20;Partner'>Seminar Partner</option>
        <option value='Web&#x20;Download'>Web Download</option>
    </select></td><td style='width: 100%;'></td></tr><tr><tr style='display:none;' ><td 
style='width:100%;' ><input type='text' style='width:100%;box-sizing:border-box;'  
maxlength='255' name='LEADCF1' value='ContractorPeople'></input></td><td style='width: 
260px;'></td></tr>
<tr><td style='width:100%;'><textarea maxlength='32000'  style='width:100%; height:80' 
name='Description'style='width:260px;box-sizing:border-box;'>&nbsp;</textarea></td>

<tr><td colspan='2' style='text-align:left;padding-top:15px;font-size:16px;'>
  <button id="formssubmit">SUBMIT QUERY</button><style type="text/css" type="submit" 
action="https://www.thecontractorpeople.co.uk" >

  #formssubmit { 
 background-color: #3a3b3f;
 padding: .5em;
 -moz-border-radius: 5;
 -webkit-border-radius: 5px;
 border-radius: 6px;
 color: #ffffff;
 font-family: 'Avenir';
 font-size: 18px;
 text-decoration: none;
 border:color:#ffffff;
}

#formssubmit:hover {
 border: none;
 background: #9799A4;
 box-shadow: 0px 0px 1px #ffffff;
}
#formssubmit {
  float: left; 
  margin-left:
  margin-bottom:4px;
  </style> <script>
      var mndFileds=new Array('Last Name');
      var fldLangVal=new Array('Last Name'); 
        var name='';
        var email='';
      function checkMandatory204987000000227471() {
        for(i=0;i<mndFileds.length;i++) {
          var fieldObj=document.forms['WebToLeads204987000000227471'][mndFileds[i]];
          if(fieldObj) {
            if (((fieldObj.value).replace(/^\s+|\s+$/g, '')).length==0) {
             if(fieldObj.type =='file')
                { 
                 alert('Please select a file to upload.'); 
                 fieldObj.focus(); 
             return false;
            } 
        alert(fldLangVal[i] +' cannot be empty.'); 
          fieldObj.focus();
          return false;
        }  else if(fieldObj.nodeName=='SELECT') {
         if(fieldObj.options[fieldObj.selectedIndex].value=='-None-') {
            alert(fldLangVal[i] +' cannot be none.'); 
            fieldObj.focus();
            return false;
           }
        } else if(fieldObj.type =='checkbox'){
         if(fieldObj.checked == false){
            alert('Please accept  '+fldLangVal[i]);
            fieldObj.focus();
            return false;
           } 
         } 
         try {
             if(fieldObj.name == 'Last Name') {
            name = fieldObj.value;
            }
        } catch (e) {}
        }

    }
    document.getElementById('formsubmit').disabled=true;
}

    }
</script>
    </form>
</div>

Answer 1

您需要使用 HTML 组件的 onMessage 函数 (https://www.wix.com/corvid/reference/$w.HtmlComponent.html#onMessage) 将 URL 发布到父页面

然后在您的页面上有一个事件侦听器，用于 HTML 组件何时发送消息，然后从中获取 url 并使用 wixLocation.to() 重定向它

export function html1_message(event) {
    let url = event.data;
    wixLocation.to(`${url}`);
}