如何解决如何禁用链接到外部站点的脚本
我正在运行以下脚本来为我的平板电脑提供天气预报。问题是每次有人不小心触摸它时,它都会打开源页面。任何想法我怎么能阻止外部页面的链接?我使用沙箱在 Iframe 上取得了成功,但无法使其在此方面发挥作用,因为我不确定这种语言是什么:
<a class="weatherwidget-io" href="https://forecast7.com/en/51d51n0d13/london/ "data-label_1="LONDON" data-label_2="WEATHER" data-font="Roboto" data-icons="climacons Animated" data-theme="pure" pointer-events: none>LONDON WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');href="javascript:void(0)"
</script>
<script>
function reloadIFrame() {
document.getElementById('weatherwidget-io-0').src = document.getElementById('weatherwidget-io-0').src;
}
window.setInterval(reloadIFrame,95000);
</script>
<script type="text/javascript">
function disableFrameLinks(){
var iFrame = document.getElementById('weatherwidget-io');
var links;
if ( iFrame.contentwindow)
{
links = iFrame.contentwindow.document.links;
for(var i in links)
{
links[i].href="#";
}
}
}
</script>
解决方法
// Activates on every page load.
MyApp.getInitialProps = async (appContext) => {
const currentPageLocation = appContext.router.pathname;
const navProps = {};
// Function used to log out a user,is called if currentPageLocation is "/logout".
const logoutUser = async () => {
return await axios.post(
"https://api.jobby.work/logout",{},{ withCredentials: true }
);
};
// Function to check redirecting of a user based on login state and role.
// For example: If I'm already logged in I shouldn't be able to visit "/login" again.
const checkRedirect = (loginState,userRole,userBusinessID) => {
if (loginState) {
if (currentPageLocation === "/login" || currentPageLocation === "/")
return true;
else if (userRole === "OWNER") return false;
else if (userRole === "WORKER") {
const condition = (element) => currentPageLocation.includes(element);
if (userBusinessID == -1) {
return (
workerAllowedRoutes.some(condition) ||
businessOwnerAllowedRoutes.some(condition)
);
} else {
return (
businessOwnerAllowedRoutes.some(condition) ||
nonWorkerAllowedRoutes.some(condition)
);
}
}
} else {
if (currentPageLocation === "/") {
return false;
} else {
const condition = (element) => currentPageLocation.includes(element);
return !allowedGuestRoutes.some(condition);
}
}
};
let currentUser;
if (currentPageLocation.includes("/logout")) { // If the user wants to log out.
await logoutUser().then(() => {
navProps.user = { username: "GUEST" };
navProps.isLoggedIn = false;
appContext.ctx.res.writeHead(302,{
Location: "/",});
});
return { navProps };
} else {
// If the user doesn't want to logout,then fetch his details and redirect/save props
// accordingly.
currentUser = await axios.get("https://api.jobby.work/get_user_details",{
withCredentials: true,});
navProps.user = await currentUser.data;
if (navProps.user.username === "GUEST") {
navProps.isLoggedIn = false;
navProps.isRedirect = checkRedirect(false,"GUEST",-1);
} else {
navProps.isLoggedIn = true;
navProps.isRedirect = checkRedirect(
true,navProps.user.user_role,navProps.user.associated_business
);
}
return { navProps };
}
};
中的 pointer-events: none
缺少它周围的 <a>
属性。
更新自:
style=""
到:
<a class="weatherwidget-io" ... pointer-events: none>LONDON WEATHER</a>
此外,您的整个代码可以简化为以下内容:
-
<a class="weatherwidget-io" ... style="pointer-events: none;">LONDON WEATHER</a>
函数所做的只是将<script>!function(d,s,id)...</script>
添加到页面(如果它不存在) - 您可以首先添加脚本并删除该函数。 -
一旦 CSS 样式
<script id="weatherwidget-io-js" src="https://weatherwidget.io/js/widget.min.js"></script>
正确应用于DisableFrameLinks()
,pointer-events: none;
函数也可移除。
最低要求代码:
<a>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。