Question

我有一个生成链接的小脚本，该链接会在新标签页中打开。我希望能够单击Fork，它会在同一选项卡中打开它自动生成的链接。我尝试创建一个onclick="document选择器，但是在生成后尝试以编程方式按下按钮并没有任何运气。这是我正在使用的东西：

https://codepen.io/s-harper/pen/dKLzQr?editors=0010

我该如何实现？

Answer 1

尝试一下

var canvas = new fabric.Canvas('c', { isDrawingMode: true });
var $link = document.querySelector("#link");
var server = "https://api.myjson.com/bins/";
var currentJSON;

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var shareLink = getParameterByName("share");
if ( shareLink ){

  var JSONURL = server + shareLink;
  $.get( JSONURL, function(data, textStatus, jqXHR) {
    if ( textStatus == "success" ){
      canvas.loadFromJSON( data );
    }
  });

}

// Save Canvas to JSON to local variable
document.querySelector("#update").addEventListener("click",function(){

    currentJSON = canvas.toDatalessJSON();

});

document.querySelector("#fork").addEventListener("click",function(){

  if ( typeof currentJSON == "undefined" ) return false;

  $link.textContent = "Loading...";
  $link.href = "";
  $link.classList.add('blink_me');

  var URL = "https://codepen.io/kostasx/pen/ZRMwKL";
  $.ajax({

        url:"https://api.myjson.com/bins",
    type:"POST",
    data: JSON.stringify(currentJSON),
    contentType:"application/json; charset=utf-8",
    dataType:"json",
    success: function(data, textStatus, jqXHR){
      $link.classList.remove('blink_me');
        if ( textStatus == "success" ){
        var uuid = data.uri.split("/");
        uuid = uuid[uuid.length-1];
        // console.log( uuid );
        $link.href = URL + "?share=" + uuid;
        $link.textContent = "Share Link";
        var newURL = URL + "?share=" + uuid;
        window.open(newURL);
      }
    }
  }); 

});

或模拟点击

var canvas = new fabric.Canvas('c', { isDrawingMode: true });
var $link = document.querySelector("#link");
var server = "https://api.myjson.com/bins/";
var currentJSON;

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var shareLink = getParameterByName("share");
if ( shareLink ){

  var JSONURL = server + shareLink;
  $.get( JSONURL, function(data, textStatus, jqXHR) {
    if ( textStatus == "success" ){
      canvas.loadFromJSON( data );
    }
  });

}

// Save Canvas to JSON to local variable
document.querySelector("#update").addEventListener("click",function(){

    currentJSON = canvas.toDatalessJSON();

});

document.querySelector("#fork").addEventListener("click",function(){

  if ( typeof currentJSON == "undefined" ) return false;

  $link.textContent = "Loading...";
  $link.href = "";
  $link.classList.add('blink_me');

  var URL = "https://codepen.io/kostasx/pen/ZRMwKL";
  $.ajax({

        url:"https://api.myjson.com/bins",
    type:"POST",
    data: JSON.stringify(currentJSON),
    contentType:"application/json; charset=utf-8",
    dataType:"json",
    success: function(data, textStatus, jqXHR){
      $link.classList.remove('blink_me');
        if ( textStatus == "success" ){
        var uuid = data.uri.split("/");
        uuid = uuid[uuid.length-1];
        // console.log( uuid );
        $link.href = URL + "?share=" + uuid;
        $link.textContent = "Share Link";
        $link.click();
      }
    }
  }); 

});

或者仅模拟重定向

var canvas = new fabric.Canvas('c', { isDrawingMode: true });
var $link = document.querySelector("#link");
var server = "https://api.myjson.com/bins/";
var currentJSON;

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var shareLink = getParameterByName("share");
if ( shareLink ){

  var JSONURL = server + shareLink;
  $.get( JSONURL, function(data, textStatus, jqXHR) {
    if ( textStatus == "success" ){
      canvas.loadFromJSON( data );
    }
  });

}

// Save Canvas to JSON to local variable
document.querySelector("#update").addEventListener("click",function(){

    currentJSON = canvas.toDatalessJSON();

});

document.querySelector("#fork").addEventListener("click",function(){

  if ( typeof currentJSON == "undefined" ) return false;

  $link.textContent = "Loading...";
  $link.href = "";
  $link.classList.add('blink_me');

  var URL = "https://codepen.io/kostasx/pen/ZRMwKL";
  $.ajax({

        url:"https://api.myjson.com/bins",
    type:"POST",
    data: JSON.stringify(currentJSON),
    contentType:"application/json; charset=utf-8",
    dataType:"json",
    success: function(data, textStatus, jqXHR){
      $link.classList.remove('blink_me');
        if ( textStatus == "success" ){
        var uuid = data.uri.split("/");
        uuid = uuid[uuid.length-1];
        // console.log( uuid );
        $link.href = URL + "?share=" + uuid;
        $link.textContent = "Share Link";
        var newURL = URL + "?share=" + uuid;
        window.location.replace(newURL);
      }
    }
  }); 

});

如何单击生成的链接

1 个答案: