I have a page a.aspx, which has an iframe whose source is ‘controlsPage.aspx’
Now referring a websource control object I am trying to find controls of ‘controlsPage.aspx’ , but the controls are not traceable.
Our Code:
wbSource.Navigate("localhost:12122//a.aspx")
Dim frameCollection As HtmlElementCollection = wbSource.Document.Window.Frames("ChildFrame").Document.GetElementsByTagName("Span")
Here we are getting count of frameCollection as 0
Main Page -> a.aspx
<html>
<body>
<iFrame id = “ChildFrame” src = “controlsPage.aspx”>
</iFrame>
</body>
</html>
Frame Page controlsPage.aspx
<html>
<body>
<asp:label Text=”Source Page”/>
</body>
</html>
You can't do that. IFrame runs and independent page. You should parse that page at the backend.
<html>
<body>
<iFrame id = “ChildFrame” src = “controlsPage.aspx”>
</iFrame>
</body>
</html>
<html>
<body>
<asp:label Text=”Source Page” id="frame_text" />
</body>
</html>
Javascript code (use the below code in the main page) :
var iframe = document.getElementById('ChildFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var input = innerDoc.getElementById('frame_text');
Related
I used the website tsviewer.com to create an insertable piece of HTML code I can insert into my webpage that will display the status of my Teamspeak server. This is what it gave me. But this doesn't quite work in vue as I don't know where to place the scripts.
<div id="ts3viewer_1118023" style=""> </div>
<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "https://www.tsviewer.com/ts3viewer.php?ID=1118023&text=757575&text_size=12&text_family=1&text_s_color=000000&text_s_weight=normal&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_i_color=&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_c_color=&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_u_color=000000&text_u_weight=normal&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_s_color_h=&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=none&text_i_color_h=000000&text_i_weight_h=bold&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=none&text_c_color_h=&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=none&text_u_color_h=&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none&iconset=default";
ts3v_display.init(ts3v_url_1, 1118023, 100);
</script>
Discord on the other hand gives a single line of code that is easily inserted and works perfectly.
<iframe src="https://discordapp.com/widget?id=261587898996883458&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
The question is, how does one convert the one kind to the other kind? Thanks
you need to add the Javascript before the tag of your
website ends.
important is than that you render an div which the right id
Here some example
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "[add here the whole teamspeaker snippet url]";
ts3v_display.init(ts3v_url_1, 1118023, 100);
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<div id="ts3viewer_1118023" style=""> </div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>
I have removed the tsviewer code in his full length because the list is public.
You should add him there [add here the whole teamspeaker snippet url]
Maybe you should also modfiy your post after it or change the url as an example.
On my index page there are two links for Login and Signup and one iframe
I have designed both(Login and signup) pages separately
Now i want to force both pages to be opened only in iframe not in a separate tab
and if someone tries to access directly redirect them to index page.
here is my code...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Login Signup
<iframe src="" name="frame" frameborder="0"></iframe>
</body>
</html>
You can add the following to the head of your HTMl document to make it automatically redirect if it is not loaded inside an iframe:
<script>
window.onload = function(){
if (top === self) {
//not inside iframe
location = 'url';
}
}
</script>
JSFiddle: http://jsfiddle.net/xjqyrsd7/
I just found the Best way to do it with Javascript..
var myUrl = 'http://localhost/test/index.php';
if(window.top.location.href !== myUrl) {
window.top.location.href = myUrl;
}
Lets say this is index.html
<html>
...
<iframe id="targetid" src="link.com"><iframe>
...
</html>
and this is link.com
<html>
...
<div class="name" href="http://I_need_this.com">blablbalba<div>
I want to get "http://I_need_this.com"
You can use the methods below:
var div = document.GetElementByClass("name");
var link = div.href;
Or:
var iframe = document.GetElementById("targetid");
var link = iframe.src;
I know a iframe tag can access to parent element with same domain + ports.
However, what if parent and iframe has different domain + port ?
i.e.
parent's domain is http://aaa.com:63342, and iframe domain is http://aaa.com:9080.(Please note that they have different ports)
Both of pages have <meta http-equiv='X-Frame-Options' content='ALLOWAll'> in their headers.
first, parent frame call iframe with form submit. like...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-Frame-Options' content='ALLOWAll'>
<title>ParentWindows with aaa.com:63342</title>
</head>
<body>
<form name='form' method='post' id='form' action=''>
<input type='text' name='greetings' value='Hello from the otherside'>
</form>
<script>
document.form.target = 'iframe';
document.form.action = 'http://aaa.com:9080//inFrame.jsp';
document.form.submit();
</script>
</body>
<iframe src="" name='iframe'></iframe>
</html>
Then a server returns like below in jsp
<%
response.setHeader("X-Frame-Options", "ALLOWAll");
String greetings = request.getParameter("greetings");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-Frame-Options' content='ALLOWAll'>
<title>iframe with aaa.com:9080</title>
</head>
<body>
<div>
greetings message : <%= greetings %>
</div>
</body>
<script>
var div = document.createElement('div');
div.textContent = 'Echo Hello';
parent.document.body.appendChild(div);
</script>
</html>
It is simple version of the situation what I am in. However, when I do like this, browser console shows error like..
Uncaught SecurityError: Blocked a frame with origin "http://localhost:9080" from accessing a frame with origin "http://localhost:63342". Protocols, domains, and ports must match.
Now I am doubting with this method(calling different hosts between iframe and parent) is possible at first place... Is it possible?
How can I make this works?
Thanks a lot
Detour to original frame.
something like...
original page with aaa.com:63342/original.html is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-Frame-Options' content='ALLOWAll'>
<title>ParentWindows with aaa.com:63342</title>
<script>
function setGreetings(greetings){
document.getElementById('greetings').value = greetings;
}
</script>
</head>
<body>
<form name='form' method='post' id='form' action=''>
<input type='text' id='greetings' name='greetings' value='Hello from the otherside'>
</form>
<script>
document.form.target = 'iframe';
document.form.action = 'http://aaa.com:9080//inFrame.jsp';
document.form.submit();
</script>
</body>
<iframe src="" name='iframe'></iframe>
</html>
Then page(jsp) which imported into the original page(inside of iframe) looks like... I can call aaa.com:9080/inFrame.jsp
<%
response.setHeader("X-Frame-Options", "ALLOWAll");
String greetings = request.getParameter("greetings");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-Frame-Options' content='ALLOWAll'>
<title>iframe with aaa.com:9080</title>
</head>
<body>
<div>
greetings message : <%= greetings %>
</div>
<iframe id='iframe' src="http://localhost:63342/third.html?greetings=<%= greetings %>"></iframe>
</body>
</html>
This is the third frame aaa.com:63342/third.html, final
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-Frame-Options' content='ALLOWALL'>
<title>ACCESS TO TOP FRAME on localhost:63342</title>
</head>
<body>
<script>
function setGrandfather(){
var greetings = getParams()['greetings'];
window.top.setGreetings(greetings);
}
//parsing parameters
function getParams() {
var param = new Array();
var url = decodeURIComponent(location.href);
url = decodeURIComponent(url);
var params;
params = url.substring( url.indexOf('?')+1, url.length );
params = params.split("&");
var size = params.length;
var key, value;
for(var i=0 ; i < size ; i++) {
key = params[i].split("=")[0];
value = params[i].split("=")[1];
param[key] = value;
}
return param;
}
</script>
</body>
</html>
What happens here
the original page has iframe which has different domain
the second page(iframed in the original page) also has an iframe which has same origin with original page
the second page will send data to its iframe(the third page) with post/get. I wish it could access other frame element via parent.document or iframe.contentDocument.document, but these will be blocked by SAMEORIGIN policy.
In third page you can access functions and elements of the original frame since they have same origin(domain + ports).
CAUTION
frames can not communicate directly
only those pages has common url, possible to set sub domain via document.domain
SO I know this solution is somewhere but I can't find it. I've been digging for about a day into google and stackOverflow.
Basically, I have an iframe and I'm trying to get it to expand to the size of its contents, a pretty simple task. I went through several methods, looking at different heights etc. But for some gosh darn reason, Chrome does not want to put up with me.
So here is the javascript to resize the IFrame. To make sure JS was working and to read the height I threw in that innerHTML piece (sort of like debugging)
<script type="text/javascript">
function resizeFrame() {
var t=document.getElementById("Footer");
var f = document.getElementById("mainContent");
var y = f.contentWindow;
t.innerHTML = y.document.body.offsetHeight;
f.height = y.body.offsetHeight;
}
</script>
Here's the iframe:
<iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0 height="100%" width="100%">
Not working!</iframe>
So for some odd reason, it does not want to work, pretty much hates me in Chrome. But it works in Firefox and IE. Any solutions??
Unless I'm missing something, I believe you have a typo on the last line of your function (missing .document.)
The following works for me in Chrome (18.0):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function resizeFrame() {
var t=document.getElementById("Footer");
var f = document.getElementById("mainContent");
var y = f.contentWindow;
t.innerHTML = y.document.body.offsetHeight;
f.height = y.document.body.offsetHeight;
}
</script>
</head>
<body>
<iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0
height="100%" width="100%">Working!</iframe>
<p id="Footer"> Footer</p>
</body>
</html>