I use this bit of code:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script>
window.setInterval("reloadIFrame();", 3000);
function reloadIFrame() {
document.getElementsByName("testFrame")[0].contentWindow.location.reload();
}
</script>
<iframe name="testFrame" src="https://docs.google.com/presentation/d/1jkNVBxAX57PjfxTNTkgO8zNnMFYoKUqUKQ4aJk8pCIs/embed?start=true&loop=true&delayms=5000" width="760px" height="920px"></iframe>
</body>
</html>
And it works well for some websites, but not for this google presntation.. What should I change to make it works?
You can try this instead, otherwise you will have a cross origin issue:
document.getElementsByName("testFrame")[0].src="https://docs.google.com/presentation/d/1jkNVBxAX57PjfxTNTkgO8zNnMFYoKUqUKQ4aJk8pCIs/embed?start=true&loop=true&delayms=5000";
regards
Related
I'm trying to work on iFrame contents and the below snippet is not returning the value of h1 from the iFramed URL. Instead, it alerts undefined. Can someone please suggest what is wrong here?
<!doctype HTML>
<head>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="myBtn">Login</button>
<br><br>
<iframe name="SSOBlock" id="SSOBlock" src="https://www.example.com/" ></iframe>
<script>
$("#myBtn").click(function(e) {
e.preventDefault();
alert($('iframe[name=SSOBlock]').contents().find('h1').html());
});
</script>
</body>
</html>
I am trying to develop the Browser Back Button redirect script.
So basically when the user arrives at index.html for google or any other social media, on clicking the back button the user should go to the specified page.
I tried creating it with javascript, But it's not working. Anybody can help about it?
I created 3 pages
1) Index.html
<!DOCTYPE html>
<html>
<body>
<p>Redirect Page</p>
</body>
</html>
2)redirect.html
<!DOCTYPE html>
<html>
<head>
<script>
function init() {
setTimeout(function(){window.scrollTo(0,1)},0);
}
window.history.pushState(‘back.html’, ‘back’, ‘back.html’);
window.history.pushState(‘index.html’, ‘Index’, ‘index.html’);
window.addEventListener(“popstate”, function(e) {
if(document.URL.indexOf(“back.html”) >= 0){
document.location.href = document.location;
}
});
</script>
</head>
<body>
<p>By pressing the browser back button it should redirect to specified url</p>
</body>
</html>
3) back.html
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script>
document.location.href = “https://www.google.com”;
</script>
</head>
<body>
</body>
</html>
I would like to know if the following is possible:
Let's say my website = www.mywebsite.com
The code looks like:
<!DOCTYPE html>
<html lang="en">
<head>
...some stuff...
</head>
<body>
<div id="testDiv"></div>
<iframe src="//widget.mywebsite.com/widget.php"></iframe>
...some stuff...
</body>
</html>
The page: //widget.mysite.com/widget.php looks like:
<!DOCTYPE html>
<html lang="en">
<head>
...some stuff...
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="someactions.js"></script>
</body>
</html>
I would like to access the div with id testDiv from //widget.mywebsite.com/widget.php
Is this possible when there is another subdomain (so widget. instead of www.) and another ip for widget. and www. ?
Thanks!
This is possible. You just have to ensure that both the parent page and the page in the iframe set the same document.domain
document.domain = "mysite.com"
I have a problem using jQuery inside an iFrame.
Here is my test setup:
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#A").contents().find('#B').addClass('Z');
});
</script>
</head>
<body>
<iframe id="A" src="test.html" style="width:700px; height: 1000px;" frameborder="0"></iframe>
</body>
</html>
test.html:
<html>
<head>
<title>test</title>
</head>
<body>
<div id="B">testcontent</div>
</body>
</html>
Normally when the page is loaded, in the source, "Z" should be added as a class, but it doesn't. Does anyone have an idea what the problem might be? Both files are in the same (local) folder.
try this
$("iframe").load(function(e){
$(this).contents().find('#B').addClass('Z');
});
You have to run it from a webserver with the HTTP scheme (http:// or https://).
Using the file scheme (file://) prevents this sort of cross frame access in some browsers.
I write some html and js to a iframe,not working in IE7/8/9,the error message is:$ is not defined?
My code is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload=function(){
var data='<html>\
<head>\
<meta charset="utf-8">\
<title>Demo</title>\
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><\/script>\
<script type="text/javascript">\
$(function(){\
alert("abc");\
});\
<\/script>\
<\/head>\
<body>\
</body>\
</html>';
window.frames["code_result"].document.open();
window.frames["code_result"].document.write(data);
window.frames["code_result"].document.close();
}
</script>
</head>
<body>
<iframe id="code_result" frameborder="0" class="frame_result" name="code_result"></iframe>
</body>
</html>
who can tell me why?thanks
update
this error only show in IE78/9,it work well in Chrome and FireFox
It's not the code loading the I frame content. It's ie's loading order. Simply wrap your I frame script in a window onload function so it allows jquery to load first. Tested and working in ie.
Add:
$(document).ready({
alert('123');
});
You will need it load jquery in the I frame before running code. JQuery hasn't loaded yet.