Question

我真的很感谢你们的任何投入。我正在尝试实施SquareUp提供给我的短代码，客户可以使用该短代码进行约会。我正在使用Wordpress制作网站，并使用联系表7来创建一些带有条件字段的问题，这些条件字段将在正确回答问题后立即显示。条件字段具有一个简短代码，可打开Squarespace上托管的窗口小部件的iframe。

这是我在联系表格7中的代码

(function() {

  function getScriptTag() {
    var scripts = document.getElementsByTagName('script');
    for (var i = 0; i < scripts.length; i++) {
      var url = scripts[i].getAttribute('src');
      if ((url === 'https://squareup.com/appointments/buyer/widget/351c730b-47e5-4879-a3ac-58cc5re4ur6d4.js') ||
        (url === 'https://squareup.com/appointments/buyer/widget/351c730b-47e5-4879-a3ac-58cc5re4ur6d4/PLD43G9PC8T2E.js')) {
        return scripts[i];
      }
    }
  }

  function isInIframe() {
    return window.window != window.top;
  }

  function embedIframe() {
    var scriptTag = getScriptTag();
    var iframe = document.createElement('iframe');
    var width = "100%";
    var height = "100%";
    iframe.style.minHeight = "500px";
    iframe.style.width = width;
    iframe.style.height = height;
    iframe.style.border = 'none';
    iframe.src = 'https://squareup.com/appointments/buyer/widget/351c730b-47e5-4879-a3ac-58cc5re4ur6d4/PLD43G9PC8T2E';

    scriptTag.parentNode.insertBefore(iframe, scriptTag);
  }

  function embedBookingButton() {
    var scriptTag = getScriptTag();

    var container = document.createElement('div');
    var button = document.createElement('a');

    button.setAttribute("style", "background-color: #2996cc; color: white; height: 40px; line-height: 38px; " +
            "padding: 0 28px; border-radius: 3px; font-weight: 500; font-size: 14px; cursor: pointer; " +
            "display: inline-block; text-decoration: none");
    button.setAttribute("href", 'https://squareup.com/appointments/book/351c730b-47e5-4879-a3ac-58cc5re4ur6d4/start');
    button.textContent = "Book Appointment Now";

    container.setAttribute("style", "text-align: center");
    container.appendChild(button);
    scriptTag.parentNode.insertBefore(container, scriptTag);
  }

  function scriptParentWidth() {
    try {
      var scriptParent = getScriptTag().parentNode;
      var computedStyle = getComputedStyle(scriptParent);
      var paddingX = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
      var borderX = parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
      return scriptParent.offsetWidth - paddingX - borderX;
    } catch (e) { // above not certain to work in all browser + tag scenarios, fall back to document
      return document.body.clientWidth;
    }
  }

  if (isInIframe()) {
    window.location = 'https://squareup.com/appointments/buyer/widget/351c730b-47e5-4879-a3ac-58cc5re4ur6d4/PLD43G9PC8T2E';
  } else {
    if (scriptParentWidth() < 280) {
      embedBookingButton();
    } else {
      embedIframe();
    }
  }
})();

.styles-appointment-form {
  text-align: center;
  margin: 25px auto 25px auto; 
  width:370px;
}

.styles-appointment-form label {
    padding: 12px 20px;
    display: inline;
    box-sizing: border-box;
    font-size: 110%;
    line-height: 125%;
}

.checkbox-1, .checkbox-2, .checkbox-3 {
    padding: 10px 10px;
    border-bottom: 4px dotted #bf7f89;
    box-sizing: border-box;
    font-size: 110%;
    width: 300px;
  display: inline-block !important;
}

.styles-appointment-page-squareup-field {
  height:650px; 
  margin-top: 25px;
  border: 4px dotted #bf7f89;
  display: inline-block !important;
  min-width:100%;
}

.testing123 {
  font-size:125%;
  margin: 25px 0px auto;
  padding: 10px;
  box-shadow: 0 3px 8px 1px #bf7f89, 0 -3px 8px 1px #2996cc;
}

<label>Are you currently pregnant?</label>
[checkbox* checkbox-1 use_label_element exclusive "Yes" "No"]

<label>Are you allergic to acrylics?</label>
[checkbox* checkbox-2 use_label_element exclusive "Yes" "No"]
    
<label>Are you currently wearing eyelash extensions from another salon?</label>
[checkbox* checkbox-3 use_label_element exclusive "Yes" "No"]

[group appointment-1][group appointment-2][group appointment-3]
<div class="testing123">Thank You!, Please proceed to booking your appointment below!</div>
<div class="styles-appointment-page-squareup-field">
<script src='https://squareup.com/appointments/buyer/widget/351c730b-47e5-4879-a3ac-58cc5re4ur6d4/PLD43G9PC8T2E.js'></script>
</div>
[/group][/group][/group]

[group no-appointments]

Sorry Message Goes Here

[/group]

现在，我遇到的问题是，当我加载页面时，条件字段中的Squareup小部件会在div下自身重复2-3。另外，Squareup部分小部件在每个浏览器中都可以正常打开，但在IE中则不能。在IE中，我看到一个将我重定向到Squareups网站的按钮，因为它认为Widget的容器太小了？谁能帮我解决这个烂摊子，谢谢大家=）

如何阻止JS脚本复制自身并在IE上运行

0 个答案: