I'm getting started with using iframes and am getting examples done from here. So far I have been able to load the webpage in an iframe. my sample code is as follows:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com"></iframe>
</body>
</html>
My question is is there a way where I can click on the hyperlinks inside the iframe and that page again loads within the iframe itself without loading as a new page?
Related
Sorry if my question is trivial, I am a beginner and am not quite sure how to approach this problem.
I am writing a blog that has a MENU bar at the top of the page. Since I don't want to update all menus on every html page, I wish to source the containing my menu from a different html page.
I have tried using an iframe or frameset, but those will unfortunately cut my dropdown menu off at the bottom. This means I either have to remove those or make a frame so large that it is large enough for the dropdowns, but that will squish the rest of the page down. Also, if I clicked any of the menu options, the page that would be updated would be the frame itself :|.
I was therefore wondering if it is possible to call a small portion of pre-existing code into an html file? I have also tried the .load() function of JQuery, but even simple tutorials don't seem to work for me.
Does anyone know a way to either import the div into an html file, or a way to get my .load() function to work? I have added the .load() tutorial I used below.
PAGE THAT CONTAINS THE DIV
<html>
<head>
</head>
<body>
<p>This is demo text.<p>
</body>
</html>
PAGE THAT RECEIVES THE DIV
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#content').load("new.html");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
Build the menu as a PHP file, then pull it in using an include function:
<?php include("/yourMenu.php"); ?>
It's that simple. Changing /yourMenu.php will change it on every page. Hope that helps!
I have a php based webpage and inside it iframe with another webpage. Parent contains list of items, and iframe contains page that will add/edit the list, save it to DB and send a js message to parent page (list) to update list without reloading parent page (a litle bit more complicated then that, but that is the core idea).
//html parent page basic content
<head>
<script>
function alert_me(){
alert('IT\'S ALIVE!');
}
<script>
</head>
<body>
<iframe src='child_page.html'></iframe>
</body>
And now the child page.
<head>
<script>
$(document).ready(function(){
//this is not working and this is what I want (auto call function after reload child)
window.top.alert_me();
//I tried autoclick button but it's not working either
$('.alert_me_button').trigger('click');
});
</script>
</head>
<body>
<!-- this is working just fine, so I know the code itself is ok -->
<a href="#" class="alert_me_button" onclick="window.top.alert_me();" >Click me to alert me</a>
</body>
As you see It works fine when user click the button callij js funtion, but it will not work the I don't want any user action. I triend , documnt.ready()... even setInterval() to pause the script to be sure it's not timing issue. Any ideas?
The code works just fine.
What browser are you using. I just copied your code and added jquery from cdn. I used SimpleHttpServer to serve the pages and avoid the cross origin blocking.
After reloading I got the message twice both in Chrome and Firefox as well.
I want to be able to get the complete source code from a webpage, I tried the method mentioned here
It does not grab all the source code for the page I want the code from.
The page got several iframes each with a "virtual tag" #document and everything after that tag I can not get.
If I just right-click the page in Chrome and select view-source the code after the #document is not visible there either. However, if I inspect the page using Chrome I can see all the source code after the #document tag too.
I looked at this post on SO but it does not help me either. I can actually see the first part of the code in the iframes, just nothing after the #document. It looks structually like this:
<iframe class="xxxxx" frameborder="0" scrolling="no" srcdoc="<html
<base target="_parent">
<head>
<style> body { display: none; } </style>
</head>
<body>
<style> </style>
</body>
</html>">
#document
<!-- code I can not reach -->
<html><head></head><body>...</body></html>
</iframe>
I tried to iterate through all the iframes in DOM using javascript but then I just get a security error which from what I read can not be worked around:
SecurityError: Blocked a frame with origin "http://www.google.com" from accessing a cross-origin frame.
Is there a way to do what I want? I mean, Chrome can see this source code through the Inspect function so it must be possible in some way.
Is it possible to execute JavaScript in either a preload script or manually targeting an iframe in a webview /The webview is based on chrome , my intuition says it should be possible.
Basically I would like to click a button inside the iframe using:
document.querySelector('button selector').click();
The page looks something like this. (The page is loaded in the webview)
<html>
<body>
<iframe>
<button id="foo">Click</button>
<iframe>
</body>
</html>
This question already has answers here:
Cross domain iframe issue
(5 answers)
Get DOM content of cross-domain iframe [duplicate]
(5 answers)
Closed 5 years ago.
I am busy teaching myself more about web technologies my current focus is javascript and jquery but I ran into a roadblock.
I added a Iframe (one that you get from google trends) to embed into your website.
The code to get the Iframe with google supplies is :
<iframe id="myframe" scrolling="no" style="border:none;" width="250" height="413" src="https://trends.google.com/trends/hottrends/widget?pn=p1&tn=10&h=413"></iframe>
This gives you a nice control on you website :
Now My task or what I wanted to do is loop all the elements in the trend iframe and print them on screen by using java script and JQuery.
So what I did was the following.
My Php file :
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="widgettrend"></div>
</body>
<script src="js/manager.js"></script>
</html>
My manager.js is :
$(document).ready(function(){
alert($("html").html());
$.holdReady(true);
$( "#widgettrend" ).before( "<iframe id='myframe' scrolling='no' style='border:none;' width='250' height='413' src='https://trends.google.com/trends/hottrends/widget?pn=p"+localStorage['country']+"&tn=10&h=413'></iframe>" );
//init plugin
$.holdReady(false);
//other code
alert($("html").html());
});
But here's the problem that I am facing In my first alert to print the html I get :
The second alert after I have added the code :
I can see it did add it to my html but did not load it. So then after a few seconds the control is loaded and if I do a Inspect using Chrome I can see that its loaded :
I did also try putting in a delay so that the control has time to load and then try to get the html but it stills shows the html like in the second alert.
Its like after the iframe is loaded its not updating the dom?
I would like to access the data using Jquery but I cant see the elements in the code.
Is this possible to access the data after it loaded like I can see in the Inspect image? Or do I need to update or refresh the DOM somehow?
How should I go about accessing the data?