I have an extension in which when I click on the icon, a popup opens. The user will not press any buttons within the extension page, the page should by default be the Google page due to the script mentioned.
The code for the pop up (in HTML) is:
<html>
<head>
<style type="text/css">
body {width:780; height:580;}
</style>
</head>
<script>
var value_raw2 = "https://www.google.com/";
document.getElementById("MyFrame").src = value_raw2 + ReturnURL();
</script>
<body>
<iframe id="MyFrame" src = "" width="100%" height="100%" frameborder="0">
</iframe>
</body>
</html>
Basically, I want the pop-up to open Google.com and not a blank page by implementing the script. However, it seems to be ignoring the script. This is a basic case which I will be refining later to dynamically change URL to anything at all at random.
Related
I am making a single page application using injection function :
<html>
<body>
link1
link2
<iframe id="iframe" width="100%" src=""></iframe>
</body>
</html>
<script>
function injector(url) {
window.parent.document.getElementById("iframe").src = url;
}
</script>
There are 2 urls in this simple example. I can save the one that has been clicked on local storage. But:
how do I explain in JavaScript (When the page is refreshed, use the last used url automatically)
How to deal with going back to a previous page (a previous url). Is there a better way to deal with navigation in single page application using JS?
here, whenever you click on link it will load url in iframe and when you do fresh it will load from localstorage itself.
<html>
<body>
link1
link2
<iframe id="iframe" width="100%" src=""></iframe>
</body>
</html>
<script>
var iframe = document.querySelector('iframe#iframe');
iframe.src=localStorage.getItem('url');
function injector(url) {
iframe.src = url;
localStorage.setItem('url',url);
}
</script>
I have a custom list from a different sharepoint site (still the same domain) that I would like to display on my work site without the header (at a minimum, but getting rid of the ribbon would be nice too). I have attempted 4 methods without success listed below:
1) I can't even get it to work on a normal page by adding ?isdlg=1 to the end of my url (ie ..allitems.aspx?isdlg=1)
2) since I mostly work with SQL and not HTML I am sure I may have screwed up some of my tags.
<div class="ms-dlgFrameContainer">
<iframe width="1400" height="600" id="DlgFramee" class="ms-dlgFrame" frameborder="0" src="myurl.aspx">
<html class="ms-dialog">
<head>
<style type="text/css">
.ms-dialog #titleAreaBox { display:none }
</style>`
3) to hide the header of the page inside the iframe.
<script type="text/javascript">
document.getElementById("myiframe1").contentWindow.document.getElementById("titlerow").style.display = "none"; </script>`
4) Most promising. When I add
<iframe id="myiframe1" src="myurl" width="1000" height="450" frameborder="1"></iframe>
<style>
#titleAreaBox { display: none }
</style>
in the same CEWP as my iframe, it removes the title area for current page and not the page in the iframe. This exactly what I want except I want it to do that for the page inside the iframe.
5) I did this as well even just trying to change header color but didn't notice any change. I looked up the correct webpart ID.
<style type="text/css">
#MSOZoneCell_WebPartWPQ2 .ms-WPHeader
{ background-color: pink; }
</style>
You could try below jQuery script, I just hide suiteBarTop in demo.
<iframe id="myiframe" width="1400" height="600" id="DlgFramee" class="ms-dlgFrame" frameborder="0" src="/sites/tst/SitePages/Home.aspx"></iframe>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$('#myiframe').load(function () {
$(this).contents().find('#suiteBarTop').hide();
});
})
</script>
I have an area control which is having href="http://google.com" I want to open this URL as pop in frame.
Area code is as follows:
<area tabindex="61" alt="" id="ar1" title="" href="http://google.com"
style="text-decoration:none;" target="_top" shape="poly"
coords="123,169,123,237,146,237,146,169"></area>
I am not generating any area control. The area control is being generated from SSRS report and this SSRS report is not assigning any id for area.
I have googled a lot but does not get success so I have posted it here.
SSRS is generating report like the below image.
.
SSRS is generating dynamic URL and each bar having different URL and it may be any server name in the globe (e.g. 1 bar has URL of google another has URL of apple)
you can use like this... I am giving a theme how can you achieve this...
<html>
<head>
<title>Test IFrame SRC by Javascript </title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
$("#button").click(function () {
$("#frame").attr("src", "http://www.dotnetschools.com/");
})
});
</script>
</head>
<body>
<div id="mydiv">
<iframe id="frame" src="" width="100%" height="300"></iframe>
</div>
<button id="button">Load</button>
</body>
</html>
As you can see on above example on button click, I am opening a url inside a iframe. you can just do that.
Thanks
I have removed target="_top" and it start working for me.
This application having too many Frame, frameset & iframe nesting. somewhere it was causing issue due to target="_top".
I have a website where all the navigation happens inside of an iframe. all the pages are locally stored on the server.
a reduced version of the html code is:
>> index.php
<html>
<head>
</head>
<body>
<table><tr><td>
<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">
</body>
</html>
Note the img is inside the main page. However, I want this image to change based upon what link is navigated to inside the iframe.
Right now I am using php GET to determine what page has been navigated to, but that is not a great solution because all the user has to do is tinker with the link and the desired image disappears.
eg:
<?
$locate = $_GET['locate'];
?>
<html>
<head>
</head>
<body>
<table><tr><td>
<? { if ($locate =="link") {
echo '<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">';
}
?>
</body>
</html>
The link inside the iframe page is:
http://example.com/index.php?locate=link
What I would like to do is somehow have the parent page holding the iframe to recognize what page is inside of the iframe and make the display of the image contingent on that instead of the hack above. I think that would be a more reliable way and not subject to the user manipulating the link.
As an aside, if there is a way to GET 'locate' in the link w/o the link showing in the address bar, that might be a compromise. But as far as I know, that can't be done.
====
EDIT
I found this:
document.getElementById("iframe_id").contentWindow.location.href
But I am not sure how to implement it.
I tried
<script>document.write(document.getElementById("vframe").contentWindow.location.href );</script>
in the body and the head ...
but the iframe link is not displayed
i tried this:
<html>
<head>
<script>
function getLink()
{
var x=document.getElementById("vframe").contentWindow.location.href;
}
</script>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
</body>
</html>
But if it is supposed to work, i can't figure out how to 'read' the result of var x ...
i tried this:
<html>
<head>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no id="vframe"></iframe>
<script>document.write(document.getElementById("vframe").contentWindow.location.href);</script>
</body>
</html>
but the result is "about:blank". If I place it in the head or above the iframe there is no result ...
*Im trying to Open multiple links in same Iframe, as well as changing the divsstyle.visibility(Visibility is working for me) but adding window.open I get nothing. I have the original address in a div id="testing" name="wordp" *
<head>
<script type="text/javascript">
function wordpaboutme() {
var showme2 = document.getElementById("testing");
showme2.style.visibility = "visible";
var changeme = document.getElementById("testing");
changeme.window.open.('http://mysite.com/main/about-me/','wordp');
}
</script>
<body>
<div id="testing" name="wordp" class="bloger" ><iframe src="http://mysite.com/main/" frameborder="0" scrolling="no" width="990" height="800" >
<p>Your browser does not support iframes.</p>
</iframe>
</div>
window.open opens a popup window. It doesn't change what's in an iframe.
To open a different page in an iframe, consider changing the "src" attribute of the iframe with JQuery
Also, as Collin Grady has mentioned in the comment, it is an even simpler method to specify the iframe id in the "target" attribute of the link, to do the job.