Javascript:在iFrame中设置Form的值不起作用

时间:2017-12-05 06:28:38

标签: javascript jquery iframe

我正在设法在这个网站上设置信用卡号码的值,我似乎无法弄明白。我被告知该表单位于iFrame内部,无法访问。如何通过控制台设置卡号的值。我已经看到其他自动填充成功完成此操作。谢谢。

在我的控制台上,我一直收到此错误:

  

VM531:3未捕获的TypeError:无法设置属性' value' null的   :3:11

enter image description here



var numb = document.getElementById('number');
numb.value = "222";

<iframe class="card-fields-iframe" id="card-fields-number-s80xmtdp1g000000" name="card-fields-number-s80xmtdp1g000000" scrolling="no" src="https://checkout.shopifycs.com/number?identifier=61d81845e21cfa9cd0cc2e43a6a8c9a1&amp;location=https%3A%2F%2Fyeezysupply.com%2F17655971%2Fcheckouts%2F61d81845e21cfa9cd0cc2e43a6a8c9a1%3F_ga%3D2.37031328.1462446110.1512281869-2081311403.1511598208" style="height: 43px;" frameborder="0"></iframe>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" media="all" href="https://checkout.shopifycs.com/build/inputs-2762b8ff87.css">
    
  </head>
  <body>
    <form>
      
        <label for="number" class="visually-hidden" aria-hidden="true">Credit Card Number</label>

        
          <input autocomplete="cc-number" id="number" name="number" aria-describedby="error-for-number tooltip-for-number" data-current-field="number" class="input-placeholder-color--lvl-30" style="color: rgb(171, 171, 171); font-family: Helvetica\ Neue, sans-serif; padding: 0.94em 0.8em; transition: padding 0.2s ease-out 0s;" placeholder="Card number" type="tel">
          <span id="error-for-number" class="input-error-message visually-hidden"></span>
        
      
        <label for="name" class="visually-hidden" aria-hidden="true">Name on card</label>

        
          <input autocomplete="cc-name" id="name" name="name" class="visually-hidden" aria-hidden="true" data-honeypot-field="" tabindex="-1" type="text">
        
      
        <label for="expiry_month" class="visually-hidden" aria-hidden="true">Expiry month</label>

        
          <input autocomplete="cc-exp-month" id="expiry_month" name="expiry_month" class="visually-hidden" aria-hidden="true" data-honeypot-field="" tabindex="-1" type="tel">
        
      
        <label for="expiry_year" class="visually-hidden" aria-hidden="true">Expiry year</label>

        
          <input autocomplete="cc-exp-year" id="expiry_year" name="expiry_year" class="visually-hidden" aria-hidden="true" data-honeypot-field="" tabindex="-1" type="tel">
        
      
        <label for="expiry" class="visually-hidden" aria-hidden="true">MM / YY</label>

        
          <input autocomplete="cc-exp" id="expiry" name="expiry" class="visually-hidden" aria-hidden="true" data-honeypot-field="" tabindex="-1" type="tel">
        
      
        <label for="verification_value" class="visually-hidden" aria-hidden="true">CVV</label>

        
          <input autocomplete="off" id="verification_value" name="verification_value" class="visually-hidden" aria-hidden="true" data-honeypot-field="" tabindex="-1" type="tel">
        
      
        <label for="issue_date" class="visually-hidden" aria-hidden="true">Issue date (MM / YY)</label>

        
          <input autocomplete="off" id="issue_date" name="issue_date" class="visually-hidden" aria-hidden="true" data-honeypot-field="" tabindex="-1" type="tel">
        
      
        <label for="issue_number" class="visually-hidden" aria-hidden="true">Issue number</label>

        
          <input autocomplete="off" id="issue_number" name="issue_number" class="visually-hidden" aria-hidden="true" data-honeypot-field="" tabindex="-1" type="tel">
        
      
      <button type="submit" class="visually-hidden" tabindex="-1"></button>
    </form>
    <script src="https://checkout.shopifycs.com/build/boot-6e4b6e821a.js"></script>
  

</body>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

假设这不是跨域问题,请尝试以下方法:

var element = $('#card-fields-iframe').contents().find('#number');

答案 1 :(得分:0)

您可以使用content()方法。

var iframeBody = $('.card-fields-iframe').content().find('.body')

并获取元素(数字)

 var numberField = iframeBody.find('#number');
 //assign value to element
 numberField.value = "222";