1

I have a WebPart page with drop down toolbar. Every item/element of toolbar is a link to some other site/page.

For time being, when users click on item/element in toolbar, selected page opens up in a new tab/window.

I want to open clicked/chosen link on the same page where main toolbar is, just in lower (Body) WebPart. Below is an image. Toolbar is in Header WebPart and I want to make iframe in Body web part. I want to add iframe to Body web part

So, my main problem is that I don't know how to make iframe to open different pages on same WebPart.

Note:

I am able to use SP designer 2013, but I cannot use Visual Studio. If anyone is having doubt related to it please let me know. EDIT: Here's part of code where is part of toolbar.

<div id='cssmenu'>
 <ul>
  <li class='active'><a href='#'><span>Home</span></a></li>
  <li class='has-sub'><a href='#'><span>Products</span></a>
   <ul>
    <li><a href='#'><span>Product 1</span></a></li>
    <li class='last'><a href='#'><span>Product 2</span></a></li>
   </ul>
  </li>
 <li class='has-sub'><a href='#'><span>About</span></a>
  <ul>
   <li><a href='#'><span>Product 1</span></a></li>
   <li class='last'><a href='#'><span>Product 2</span></a></li>
  </ul>
 </li>
 <li class='active'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

2 Answers 2

2

I finally found solution for this one.
In tags person should just put target="optional word exp. " after a href="#". So it should look like this
<a href="#" target="MyFrame">

In iframe part of code just put
<iframe name="MyFrame" src="#"></iframe>

-1

Add a Content Editor WebPart in lower section where you want to load the external page. Your buttons should call this function on click as shown in example below.

Feel free to modify the button or iframe code according to your structure.

HTML

<button onclick="SetIframe(this.id)" id="http://www.simplehtmlguide.com/">Click me</button>


<iframe id="myiFrame" src="about:blank" width="1000" height="450" frameborder="1"></iframe>

JavaScript

<script type="text/javascript">

        function SetIframe(url)
        {
         document.getElementById('myiFrame').src = url;
        }

 </script>
3
  • This is not what I was asking about. I don't need buttons as I have toolbar with links in it.
    – Danilo
    May 5, 2016 at 14:13
  • This is just a guideline i tried to share with you that how it could work. You can use the same JS function for you toolbar links or share the tool bar code so i can look into it. May 6, 2016 at 5:52
  • Added code to original post.
    – Danilo
    May 9, 2016 at 9:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.