我一直在尝试将URL传递给此功能，但似乎并没有为我单击。我仍在学习。:(任何人都可以提供帮助吗？

我想在HTML中将URL（test.html）包括在HREF标签中，而不是将其包括在函数本身中。这样，我将能够为我的所有链接重复使用此功能。我希望这是有道理的。

javaScript：

function myFunctionA() {
    var myWindow = window.open("", "MsgWindow", "width=1000,height=700");
    myWindow.document.write('<iframe name="contentwin" src="test.html" scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>');
    myWindow.document.close();
}

html：

<a href="#" onClick="myFunctionA()">link</a>

使用ES5语法和标准字符串串联：

function myFunctionWithParam(pageName) {
  console.log("Open " + pageName + "page");
}
myFunctionWithParam("test.html");

使用ES6语法，箭头函数和模板文字相同的示例：

const myFunctionWithParam = (pageName) => {
  console.log(`Open ${pageName} page`);
}
myFunctionWithParam("test.html");

尝试将其实施到您的代码示例中。祝你好运！

您可以创建一个看起来像常规HTML链接的链接，但也可以调用一个函数。您将"此"传递给函数，以获取对函数调用的原始对象的引用。（在这种情况下，A HREF）。

<a href="test.html" onClick="myFunctionA(this); return false">test page</a>

在这里，我返回false，以使得未完成正常处理。如果我省略了它，它将调用您的函数（用test.html弹出窗口），然后用test.html替换当前页面，我认为您不想要它。

我将"此"传递给函数，在功能中，我将其命名为myObject。在功能中，我可以看到以：

调用的对象的HREF

var hrefTarget = myobject.href;

当然，您可以使用一些巧妙的模板内容将hreftarget包含在字符串中，但是我使用纯老式带有字符串的字符串（只是为了保持话题）。

工作示例如下：

<body>
<div>
  <ul>
    <li><a href="test.html" onClick="myFunctionA(this); return false">test page</a>
    <li><a href="otherpage.html" onClick="myFunctionA(this); return false">other page</a>
  </ul>
</div>

<script>
function myFunctionA(myobject) {
var myWindow = window.open("", "MsgWindow", "width=1000,height=700");
var hrefTarget = myobject.href;
myWindow.document.write('<iframe name="contentwin" src=' + hrefTarget + ' scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>');
    myWindow.document.close();
}
</script>
</body>

es6

您可以使用tick标记将数据插入字符串，然后可以使用${my_variable}在字符串中使用变量。这些被称为模板文字

看起来像这样：

function myFunctionA(url) {
    var myWindow = window.open("/myPage.html", "MsgWindow", "width=1000,height=700");
    myWindow.document.write(`<iframe name="contentwin" src="${url}" scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>`);
    myWindow.document.close();
}
myFunctionA('http://example.com')
myFunctionA('http://another-example.com')

ES5

您可以使用+操作员连接多个字符串。

看起来像这样：

function myFunctionA(url) {
    var myWindow = window.open("/myPage.html", "MsgWindow", "width=1000,height=700");
    myWindow.document.write('<iframe name="contentwin" src="' + url + '" scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>');
    myWindow.document.close();
}
myFunctionA('http://example.com')
myFunctionA('http://another-example.com')

concat（）

使用Concat（）方法允许您通过无限参数，它们都将被串联在一起。在这里，我通过一个数组，但是使用...（传播语法符号）我可以将其作为一个参数

将其传递给

function myFunctionA(url) {
    var myWindow = window.open("/myPage.html", "MsgWindow", "width=1000,height=700");
    var items = [
        '<iframe name="contentwin" src="',
        url,
        '" scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>'
    ];
    myWindow.document.write(''.concat(...items));
    myWindow.document.close();
}
myFunctionA('http://example.com')
myFunctionA('http://another-example.com')

，因为您是JavaScript的新手，最好不要从一开始就不再养成不良习惯。迄今为止持续的最糟糕的做法之一是使用内联HTML事件属性（onclick，onmouseover等）。有很多原因不使用它们，您可以在这里看到它们。

接下来，当您实际上没有在任何地方导航时，请勿使用a元素（毕竟，您将href属性设置为#，以表明您不想实际去任何地方）。它在语义上是不正确的，可能会给依靠屏幕阅读器访问您的页面的人们带来问题。几乎任何元素都可以具有click事件，因此div或button元素可以做到这一点。

或者，如果您想分配自己创建和打开新窗口的需求，则a是合适的，您需要的只是：

<a href="test.html" target="_blank">link</a>

target="_blank"将使该页面在全尺寸的新浏览器窗口中打开。

接下来，需要将文件从某个地方注入函数，这是HTML data-* 属性的绝佳用例。您可以拥有调用您功能的多个链接，但每个链接都可以存储应在功能中使用的不同页面。当您需要从属性获取实际值时，可以使用 dataset 对象提取它。

最后，由于您显示您希望iframe填写整个新窗口，因此您实际上根本不需要iframe，只需使用所需的页面填充新窗口。

按照现代标准，代码将是（由于堆栈溢出中的代码限制，窗口实际上不会在下面的代码段中打开，但是您可以在此处查看一个工作版本此处）：

// First, get a reference to the HTML element you wish to work with. 
// There are many ways to do this (via an id, via a CSS selector, via
// the element's position in the document) with .getElementById() or
// .querySelector(), etc. Here, I've used an id in the HTML, so we'll
// get the element by its id:
var link = document.getElementById("openIFrame");
// Next, register the event handling function with the event
link.addEventListener("click", myFunctionA);
function myFunctionA() {
  // When the function is invoked, the keyword "this" will be bound to the HTML
  // element that triggered the event. From there, you can access your custom
  // data property with: dataset.propName which only needs to be passed to your 
  // window.open invocation since the only thing you want in the new window is
  // the contents of the new file:
  var myWindow = window.open(this.dataset.file, "MsgWindow", "width=1000,height=700");
}

<div id="openIFrame" data-file="test.html">link</div>

但是，如果您确实需要iframe，则只需将相同的this.dataset.file串入创建iframe的字符串中：

// First, get a reference to the HTML element you wish to work with. 
// There are many ways to do this (via an id, via a CSS selector, via
// the element's position in the document) with .getElementById() or
// .querySelector(), etc. Here, I've used an id in the HTML, so we'll
// get the element by its id:
var link = document.getElementById("openIFrame");
// Next, register the event handling function with the event
link.addEventListener("click", myFunctionA);
function myFunctionA() {
  // When the function is invoked, the keyword "this" will be bound to the HTML
  // element that triggered the event. From there, you can access your custom
  // data property with: dataset.propName which only needs to be concatenated
  // into your string for the iframe:
  var myWindow = window.open("", "MsgWindow", "width=1000,height=700");
  myWindow.document.write('<iframe name="contentwin" src="' + 
                          this.dataset.file + 
                          '" scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>');
  myWindow.document.close();
}

<div id="openIFrame" data-file="test.html">link</div>

将URL传递到Document.Write

es6

ES5

concat（）

相关内容

最新更新

热门标签：