我想通过链接点击发送的URL变量在另一页上设置iframe src

问题描述

说明

我有一个发布文章的网站，我有一连串的链接，这些链接都可以单击，单击该链接时，将发送2个变量，作品的标题和链接（然后在带有iframe的另一页上，标题显示在price = pagecontent.select('main div.rentalprice span')[0].text print(price) # 3.000 并将链接传递到iframe src）。

我这样做是这样的：

for elem in pagecontent.select('main div.rentalprice span'): 
    print(elem.text)

这是<h1\>函数（在我的app.js中）：

<div class="sidenav">
<h3> Writings:</h3>

    <a href="iframe.html"
        onclick="getLinkAndTitle('TITLE BLAH BLAH','https:/\/WWW.LINK-GOES-HERE');">TITLE BLAH BLAH</a>
        ...
</div>

这是在iframe页面上：

getLinkandTitle()

这对我而言不再有效，因为我需要能够通过单个链接共享作品（目前，对所有人而言，它们仅为www.mysite.com/iframe.html）。 我仍然想保留我的iframe设置，这意味着我不想将所有作品都放在不同的页面上，我喜欢如何将其中的一页收录在其中（通过google共享链接（对我有用））。 / p>

因此，我需要标题和指向各个作品的链接，以某种方式传递到iframe页面的URL，并让iframe src获得URL，而

获得标题。

我只知道JavaScript和HTML，并且从未使用过jQuery或PHP，但是在寻找答案之后，使用其中一种似乎是唯一的方法...所以，如果您的答案是jQuery或PHP，请记住我两者的经验均为零，并且要尽可能具体。

谢谢！ ：）

解决方法

一种方法是将url哈希与带有描述性的可读标签的文章一起使用。然后将相关数据（链接，标题和子词）存储在javascript对象或远程json文件中。

类似的东西：

const data = [
   {title:'My cool article',link:'http...',slug: 'my-cool-article'},{title:'Some other article',slug: 'some-other-article'}
]

然后在链接中使用：

<a href="/iframe.html#my-cool-article">My cool article</a>
                   <!--  ^^^^^  hash to match slug in data -->

然后在iframe页面中，使用url哈希遍历数据以查找匹配的段，并使用适当的标题和链接（或url中没有匹配的段时使用默认值）

const hash = window.location.hash;// location object has page url components

// defaults for no match
let src = '/not-found.html',titleTxt = 'Not Found';

if (hash && hash !== '#') {
  // remove the `#` from url hash
  const hashSlug = hash.slice(1);
  // use Array.prototype.find() to get matching item from array
  const item = data.find(el => hashSlug === el.slug);
  // if no match item is undefined
  if (item) {
    // set corresponding values
    src = item.link;
    titleTxt = item.title
  }

}

document.getElementById('title').innerText = titleTxt ;
document.getElementById('ifrm').src = src;