Question

我有带有付款功能的角度js应用程序。我想插入authorize.net密码（由authorize.net提供给经过验证的商家。我将我的网站添加到authorize.net服务器上的Verified Merchant Seal Domains List）：

<!-- (c) 2005, 2014. Authorize.Net is a registered trademark of CyberSource Corporation --> <div       class="AuthorizeNetSeal"> <script type="text/javascript" language="javascript">var ANS_customer_id=my_customer_id;</script> <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Merchant Services</a> </div>

当我插入我的一个视图页面时，它显示以下错误

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

据我所知，它在加载视图后无法写入封印图像（bcoz seal.js包含document.write代码）。但我不知道如何解决这个问题。

如果我将此代码放在主index.html中，它可以正常工作（显然）。但我需要在我的一个视图文件中。请帮我解决这个问题。

提前感谢。

Answer 1

问题是document.writeln（）不会从你的异步加载的seal.js脚本中运行，因为页面已经加载了。使document.writeln（）和document.write（）异步工作是不可能的，所以你必须解决它。

有两种解决方案......

第一个解决方案是下载seal.js脚本并将其托管在您的网站上，用字符串替换所有document.writeln（）函数。

我在这里完成了这个（seal.js文件在js标签中）：的 http://codepen.io/anon/pen/WbxJEd

用
替换document.write()和document.writeln()
var htmlString = ''; htmlString += '<img src="blabla"/>';

第二个解决方案（如果您不想托管js，可能是更好的选择）是用您自己的功能覆盖document.write()和document.writeln()功能....

<强> http://codepen.io/anon/pen/JoKvyg

document.writeOld = document.write; document.writelnOld = document.writeln; //Getting the element we are rendering too and setting string and custom function var placeholder = document.getElementById('sealPlaceholder'), sealHtml = '', customWriteFnc = function(html) { sealHtml += html; placeholder.innerHTML = sealHtml; } //Overwriting document.write and document.writeln with our own function document.write = customWriteFnc; document.writeln = customWriteFnc; //Loading the script after the page has loaded setTimeout(function(){ var head = document.getElementsByTagName('head')[0], script = document.createElement('script'); script.type= 'text/javascript'; script.src= '//verify.authorize.net/anetseal/seal.js'; head.appendChild(script); }, 500);

Answer 2

这是我为我的项目编写的指令。确保将我的模块添加为您的应用程序的依赖项。

代码中的用法：

<div data-authorize-net-seal="yourAuthorizeIdHere"></div>

使用Javascript：

＆＃13;

(function(angular) {
  'use strict';

  var ANSVerificationURL = "https://verify.authorize.net/anetseal/"; // String must start with "//" and end with "/"
  var AuthorizeNetSeal = {
    verification_parameters: "",
    id_parameter_name: "pid",
    url_parameter_name: "rurl",
    seal_image_file: (ANSVerificationURL + "images/secure90x72.gif"),
    seal_width: "90",
    seal_height: "72",
    seal_alt_text: "Authorize.Net Merchant - Click to Verify",
    display_url: "http://www.authorize.net/",
    text_color: "black",
    text_size: "9px",
    line_spacing: "10px",
    new_window_height: "430",
    new_window_width: "600",
    current_url: "",
    display_location: true,
    no_click: false,
    debug: false
  };

  var authorizeNetModule = angular.module("authorizeNet", []);
  authorizeNetModule.directive("authorizeNetSeal", [
    function() {
      var initialize = function(elem, authorizeCustomerId) {
        var innerHtml = "";
        AuthorizeNetSeal.verification_parameters = '?' + AuthorizeNetSeal.id_parameter_name + '=' + escape(authorizeCustomerId);
        if (window.location.href) {
          AuthorizeNetSeal.current_url = window.location.href;
        } else if (document.URL) {
          AuthorizeNetSeal.current_url = document.URL;
        }

        if (AuthorizeNetSeal.current_url) {
          AuthorizeNetSeal.verification_parameters += '&' + AuthorizeNetSeal.url_parameter_name + '=' + escape(AuthorizeNetSeal.current_url);
        }

        if (!AuthorizeNetSeal.no_click) {
          innerHtml += '<a ';
          innerHtml += 'href="' + ANSVerificationURL + AuthorizeNetSeal.verification_parameters + '" ';
          if (!AuthorizeNetSeal.debug) {
            innerHtml += 'onMouseOver="window.status=\'' + AuthorizeNetSeal.display_url + '\'; return true;" ';
            innerHtml += 'onMouseOut="window.status=\'\'; return true;" ';
            innerHtml += 'onClick="window.open(\'' + ANSVerificationURL + AuthorizeNetSeal.verification_parameters + '\',\'AuthorizeNetVerification\',\'';
            innerHtml += 'width=' + AuthorizeNetSeal.new_window_width;
            innerHtml += ',height=' + AuthorizeNetSeal.new_window_height;
            innerHtml += ',dependent=yes,resizable=yes,scrollbars=yes';
            innerHtml += ',menubar=no,toolbar=no,status=no,directories=no';
            if (AuthorizeNetSeal.display_location) {
              innerHtml += ',location=yes';
            }
            innerHtml += '\'); return false;" ';
          }
          innerHtml += 'target="_blank"';
          innerHtml += '>';
        }

        innerHtml += '<img src="' + AuthorizeNetSeal.seal_image_file + '" width="' + AuthorizeNetSeal.seal_width + '" height="' + AuthorizeNetSeal.seal_height + '" border="0" alt="' + AuthorizeNetSeal.seal_alt_text + '">';

        if (!AuthorizeNetSeal.no_click) {
          innerHtml += '</a>';
        }
        elem.html(innerHtml);
      };

      return {
        scope: false,
        restrict: 'A',
        link: function(scope, elem, attrs) {
          initialize(elem, attrs.authorizeNetSeal);
        }
      };
    }
  ]);
})(window.angular);

＆＃13;

Answer 3

Authorize.net商家印章根本不起作用。我想在这里继续记录，并说该脚本没有用。它非常过时，除了使人迷惑，并在需要使用更多资源的东西上做一个简单标签之外，什么也没做。

请帮忙复制它输出的链接，删除不必要的参数，例如高度和宽度，然后完成。

<a href="https://verify.authorize.net/anetseal/?pid=theAnetIdThatTheScriptGenerates&rurl=https://yoursite.com/" onMouseOver="window.status='http://www.authorize.net/';return true;" onMouseOut="window.status='';return true;" onClick="window.open('https://verify.authorize.net/anetseal/?pid=theAnetIdThatTheScriptGenerates&rurl=https://yoursite.com/','AuthorizeNetVerification','width=600,height=430,dependent=yes,resizable=yes,scrollbars=yes,menubar=no,toolbar=no,status=no,directories=no,location=yes'); return false;" rel="noopener noreferrer" target="_blank"><img src="https://verify.authorize.net/anetseal/images/secure90x72.gif" alt="Authorize.Net Merchant - Click to Verify"></a>

请注意，该脚本会为您生成一个ID，它看起来像：

var ANS_customer_id='XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXX';

只需使链接中显示的pid就是那个数字。

在样式标签和不必要的标签参数中破坏CSS。

将authorize.net商家密封放置在augular js视图文件中

3 个答案: