I have a problem with opening links with target="_blank" which are in the iframe in WKWebView. Normally, these kind of links are opened in new windows, but WKWebView blocks it.
In my situation, I have to load HTML from string with embedded script of 3rd party library, which onLoad inject iframe in body of view (so I can't change anything in this code). The HTML after load looks similar to this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
... Script which injects on load
</head>
<body>
<iframe sandbox="allow-scripts allow-same-origin" ...>
LINK
</iframe>
</body>
</html>
The finish effect which I'd like to achieve is to open this links in Safari, outside of the app.
Solutions which I tried:
add uiDelegate to WKWebView and listen to events in func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? which was proposed here (it is called on loading a page so it is correctly configured)
add <base target="_parent"> or <base target="_top"> to <head> tag which was proposed here
add event listeners to all <a> tags in document which was proposed here
Related
The below code not proper working as i wants, Anyone knowns about this issue why it happening. i want open external website on our website body div .
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
jQuery 3.1.1
<style >
#content{height:250;width:500px;}
#content object{height:100%;width:100%;}
</style>
<script >$(document).ready(function(){
$('a').on("click", function(){
event.preventDefault();
// Load External pages.
$("#content").html('<object data="'+this.getAttribute('href')+'" />');
});
});</script>
```Html Code```
Google
<div id="content"></div>
</body>
</html>
Do you want to use iframes?
The HTML Inline Frame element "iframe" represents a nested browsing context, embedding another HTML page into the current one.
<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="300"
height="200"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
Not every site can be loaded in a frame if they are not on the same origin, for example in your case google.com sets X-Frame-Options (a header) as sameorigin.
There's no way to bypass it unless you are making this for a chrome extension where you'd have to modify the response to remove X-Frame-Options header and everything would work fine.
You could read more about X-Frame-Options, from here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
If you want to know about how to remove X-Frame-Options if you are making a chrome extension, Getting around X-Frame-Options DENY in a Chrome extension?
I've a simple web-application, which consists of 3 simple pages
a.html
b.html
c.html
<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
a.html
<br />
c.html
</body>
</html>
<!-- c.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
As can be seen from the above code, a.html has a link to b.html, b.html has a link to both a.html & c.html and finally, c.html has a link to b.html.
All of the pages will be hosted on the same domain, and I want a very simple thing. All I want is to execute a callback whenever browser's back/forward button is pressed (specifically before navigating to the new page), and in the callback I want the page to which we'll be navigating. And I don't want to update the browser's history while achieving the above (I don't want to ruin the user's experience, updating browser-history will result in unexpected navigation for the user)
The solutions that I tried:
performance.navigation.type
performance.navigation.type == 2 can be used, but it doesn't distinguishes between back and forward button. So it's not of much use for me. Is there any way to distinguish the back and forward button press here?
I don't want to distort this.window.history so that I can get a callback on onpopstate (refer this). Distorting the windows history means ruining the user-experience. Can this be done without distorting the windows history?
I know that using window.history object, I can't find the URL to which the forward/back button will navigate to. (This is because of security). But provided that all of my pages are on the same domain, can I somehow get the url to which fwd/back button will be taking me to. I'm mostly concerned about b.html. While I'm on b.html the forward/back button can take me to either a.html or c.html, how do I detect this before actual navigation happens, so that I can get a callback at this point and execute it.
I tried using JQuery-Mobile but was stuck and posted it as a separate question. Though I'm not sure how JQuery Mobile achieves it and if it will distort the browser's history.
I tried using React-routers, but they are more suited for a single-page-application, and so not much help from there also. Can this be done using any react-concepts?
This page exists as a file in an ASP.NET application with target framework 3.5.
I've been experiencing an error on my site (first reported yesterday) that has to do with users having Chrome Frame installed on IE8 or IE9 and them clicking on a link to Open a New Window. The Child page opens up, but when the Child Window is closed (or sometimes before), the Parent Window Crashes. (The screen is completely grey).
Test code which replicates this issue is below, but I have no idea what is occurring or how to resolve it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
</head>
<body>
<button id="open-link">Hi</button>
<script>
var a = document.getElementById("open-link");
a.addEventListener("click", function () {
window.open("http://google.com", "Browser");
}, false);
</script>
</body>
</html>
I am seeing the same issue while on a different platform, so it is not an ASP.net. If you are using Chrome Frame, use window.open to open another window, then close that window, it crashes the remaining tab/window. If your window being opened is outside of the same-domain policy then it crashes the opening tab on opening instead of on close.
I do not have a workaround or solution yet, will post if I find one.
Can use a normal anchor link, and you said it's generated dynamically.
Set dynamic url to a variable either in tags in view or global namespace.
var dynamicUrl = {{myUrl}},
urlTitle = {{myUrl.title}}; // Or whatever construct is generating.
HTML
Hi
I have a code like this:-
<html>
<head>
<title>Test Page</title>
</head>
<body>
ABC
<iframe name="iframe"></iframe>
</body>
</html>
I want this functionality:-
If there is an error in loading the page if IFrame, than it change the IFrame source to other url. I want this for both Firefox and IE using javascript
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to detect if JavaScript is disabled?
I need to detect whether javascript is disabled in browser.
To do so I have put an iframe inside the document and refreshing the page in a interval of 10sec. Once script is disabled, it has to redirect the top parent with javascript error URL. Here is my code for iframe:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://localhost/test/" target="_top" />
<noscript>
<meta http-equiv="refresh" content="1; URL=http://localhost/test/javascript_error.php" />
</noscript>
<meta http-equiv="refresh" content="10" />
<title>Detect Script</title>
</head>
<body style="text-align:center;">
Detecting whether javascript script is enabled/disabled in the browser.
</body>
</html>
I'm adding the tag to the content of an iframe html and a redirect meta tag, which should load to the top parent location.
Any idea why this does not work?
or how do i get this thing to work?
Thanks
The base tag affects only elements with URLs that appear as the content of an attribute designated to have a URL value, such as href.
The constructive approach to dealing with JavaScript enabled/disabled is to first design a page assuming that JavaScript is disabled, then add JavaScript in a non-obtrusive way.
UPDATE: I see what you are trying to do. The base tag will only work with links. Since this only is done when JavaScript is disabled, the href of the iframe cannot possibly change and you cannot possibly 'programmatically click' a link which may reference to that JavaScript error page, there is really no possible solution using base. Refer to my solution below.
The reason that your code doesn't work is because most browsers would not render 2 <meta http-equiv="refresh"> tags separately.
So instead of writing <meta http-equiv="refresh" content="10" />, just write:
<script type="text/javascript">
setTimeout(function () {
window.location.reload();
}, 10000);
</script>