问题描述
我正在运行以下脚本来为我的平板电脑提供天气预报。问题是每次有人不小心触摸它时，它都会打开源页面。任何想法我怎么能阻止外部页面的链接？我使用沙箱在 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>