ES6

Question

我一直在尝试将URL传递给此功能，但它似乎似乎没有为我点击。我仍在学习。 :(请问有人可以提供帮助吗？我有很多限制，我正在尝试解决（如果你想知道我在这里想做什么）。

我想在html中的href标记中包含URL（test.html），而不是将其包含在函数本身中。这样我就可以为我的所有链接重用此功能。我希望这是有道理的。

使用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>

Answer 1

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

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

myFunctionWithParam("test.html");

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

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

myFunctionWithParam("test.html");

尝试在代码示例中实现它。祝你好运！

Answer 2

ES6

您可以使用刻度线将数据插入字符串，然后您可以使用${my_variable}来使用字符串中的变量。这些被称为template literals

它看起来像这样：

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

您可以使用+运算符concatenate multiple strings together。

它看起来像这样：

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（）方法可以传递无限制的参数，它们将被连接在一起。这里我传递一个数组，但使用... (Spread Syntax Notation)我可以将它作为一个参数传递

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')

Answer 3

由于您不熟悉JavaScript，因此最好不要从一开始就养成不良习惯。迄今为止最糟糕的做法之一是使用内联HTML事件属性（onclick，onmouseover等）。有很多理由不使用它们，你可以看到它们 here 。

接下来，当您实际上并未在任何地方导航时，请勿使用a元素（毕竟，您要将href属性设置为#以表示你不想真正去任何地方）。它在语义上是不正确的，可能会导致依赖屏幕阅读器访问您的页面的人出现问题。几乎任何元素都可以有click个事件，因此div或button元素可以解决问题。

或者，如果您不想自己创建和打开新窗口，那么a将是合适的，您只需要：

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

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

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

最后，由于您显示希望iframe填满整个新窗口，因此您根本不需要iframe，只需填充新窗口与您想要的页面。

遵循现代标准，代码将是（由于Stack Overflow中的代码限制，窗口实际上不会在下面的代码片段中打开，但您可以看到工作版本 here ）：

＆＃13;
＆＃13;
// 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"); }
＆＃13;
<div id="openIFrame" data-file="test.html">link</div>
＆＃13;
＆＃13;
＆＃13;

但是，如果您确实需要iframe，那么您只需将相同的this.dataset.file连接到创建iframe的字符串中：

＆＃13;
＆＃13;
// 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(); }
＆＃13;
<div id="openIFrame" data-file="test.html">link</div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

您可以创建看起来像常规HTML链接的链接，也可以调用函数。将“this”传递给函数以获取对调用函数的原始对象的引用。（在这种情况下是a href）。

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

在这里，我返回false，以便不进行正常处理。如果我省略它，它将调用你的函数（弹出一个带有test.html的窗口），然后用test.html替换当前页面，我认为你不需要它。

我将“this”传递给函数，在函数中，我将其命名为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>

将url传递给document.write

4 个答案:

ES6

ES5

的concat（）