小编Kir*_*ril的帖子

阻止历史传播到父窗口

我有2个简单的html页面:父母和孩子.父母将孩子存放在里面iframe.
Parent.html:

<html>
<head></head>
<body>

<input type="text" id="text" />
<input type="button" value="change hash" onclick="javascript:changeHash()" />

<iframe src="Child.html"></iframe>

<script type="text/javascript">
    function changeHash () {
        window.location.hash = document.getElementById('text').value;
    }
</script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

和Child.html:

<html>
<head></head>
<body>

<input type="button" value="go back" onclick="javascript:goBack()" />

<script type="text/javascript">
    function goBack () {
        this.history.back();
    }
</script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我使用更改哈希按钮向历史记录添加几个哈希值.当我按下里面的回按钮时iframe- 更改了父页面的哈希值.似乎这是规范的行为.

所以问题是:是否有可能阻止从iframe传回到它的父页面？所以我希望iframe不要改变父级的历史/哈希.

注意:相同的行为是go函数(实际上,go(-1)是相同的back()).

javascript iframe browser-history hashchange

Kir*_*ril

2014 08-05

7
推荐指数

1
解决办法

2085
查看次数

React-router:阻止导航到目标路由

我正在使用带有历史记录的react-router useQueries(createHashHistory)(),我想要根据路由配置阻止导航到多个路由.
所以路由配置如下:

<Route path="/" name={RouteNames.APP} component={AppContainer}>
    <Route path="view-1"
        onEnter={ view1onEnter }
        onLeave={ view1onLeave }
        component={ View1 }
        canNavigate={ false }
    />
    <Route path="view-2"
        onEnter={ view2onEnter }
        onLeave={ view2onLeave }
        component={ View2 }
        canNavigate={ true }
    />
    ...
</Route>

Run Code Online (Sandbox Code Playgroud)

所以我们假设我正在进行#/view-2并调用类似的动作history.push({pathname: '/view-1'});.但是一旦路由view-1有一个标志canNavigate={false}- 我想阻止导航到它并显示消息而不改变散列和任何其他副作用(如调用onLeave挂钩view-2).

我正在考虑听history:

history.listenBefore((location, callback) => {
    //e.g. callback(false) to prevent navigation
})

Run Code Online (Sandbox Code Playgroud)

但我无法获得路由实例来检查canNavigate标志.
后来我发现history有一个方法match实际上根据给定的下一个路由器状态location: …

javascript browser-history reactjs react-router

Kir*_*ril

lucky-day

7
推荐指数

1
解决办法

5445
查看次数

我有一个项目列表,并在一些项目的末尾我想添加一个图标(或其中几个 - 它是动态的).Items的容器有一个固定的宽度,如果item的文本大小太大 - 我想添加省略号.
所以问题是在文本旁边添加了图标,如果文本很长 - 图标会移出容器.所有项目的模板必须相同.
注意:并非所有项目都有图标,而某些图标可能包含多个图标.
注2: javascript解决方案不适用,想在纯CSS中制作它.

实际:
在此输入图像描述

预期:
在此输入图像描述

任何帮助深表感谢.

body {
  font-size: 20px;
}

.container {
  width: 150px;
  background: #ff0;
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.container li {
  border-bottom: 1px solid #000;
}

.item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon {
  background: #0f0;
}

Run Code Online (Sandbox Code Playgroud)

<ul class="container">
  <li>
    <div class="item">
      <span class="text">Text 1</span>
      <span class="icon">12</span>
    </div>
  </li>
  <li>
    <div class="item">
      <span class="text">Text 2 Text 2</span>
      <span class="icon">12</span>
    </div>
  </li>
  <li> …

Run Code Online (Sandbox Code Playgroud)

html css icons ellipsis css-float

Kir*_*ril

lucky-day

2
推荐指数

1
解决办法

1821
查看次数